1. Introdução de vuex
O que é vuex?
(Reduzido) para vue em estado compartilhado da pluralidade de componentes seja gerenciamento centralizado
O papel (vantagens) do vuex?
Problemas que a vuex pode otimizar para resolver: ①Defina
o comportamento dos dados e seus dados de operação no componente pai ②Também
precisa passar o comportamento dos dados e sua operação de dados para cada subcomponente (pode exigir transmissão de vários níveis)
para otimizar função do código.
Fluxo de dados unilateral de vuex (ilustração)
2. O uso de vuex está relacionado
Instalar vuex (comando: npm install - salvar vuex) -> estrutura fixa vuex (criar um arquivo store.js) -> introduzir em main.js -> usar
Baixe o comando do plugin vuex
npm install --save vuex
Uso de vuex
①Crie um arquivo store.js e tenha a seguinte escrita fixa nele:
/*
* vuex的核心管理对象模块：store
* */
import Vue from "vue";
import Vuex from "vuex";
//声明使用Vuex
Vue.use(Vuex);
//状态对象
const state = {
};
//包含多个更新state函数的对象
const mutations = {
};
//包含多个对应事件回调函数的对象
const actions = {
};
//包含多个getter计算属性函数的对象
const getters = {
}
export default new Vuex.Store({
state,//状态对象
mutations,//包含多个更新state函数的对象
actions,//包含多个对应事件回调函数的对象
getters//包含多个getter计算属性函数的对象
}
)
②Introduza o arquivo store.js em main.js
③ Escreva as informações relevantes no componente nos quatro objetos (estado, mutações, ações, getters) no atributo $ store, de acordo com a lógica do fluxo de dados na figura a seguir:
exemplo de código
arquivo 1.store.js
/*
* vuex的核心管理对象模块：store
* */
import Vue from "vue";
import Vuex from "vuex";
//声明使用Vuex
Vue.use(Vuex);
//状态对象
const state = {
//初始化数据
count: 0
};
//包含多个更新state函数的对象
const mutations = {
INCREMENT(state){
state.count++;
},
DECREMNENT(state){
state.count--;
}
};
//包含多个对应事件回调函数的对象
const actions = {
increment({
commit}){
commit("INCREMENT");
},
decrement({
commit}){
commit("DECREMNENT")
},
incrementIfOdd({
commit,state}){
//注意此处将commit方法作为参数的写法
if(state.count%2===1){
commit("INCREMENT");
}
},
incrementAsnyc({
commit}){
setTimeout(()=>{
commit("INCREMENT")
},1000)
}
};
//包含多个getter计算属性函数的对象
const getters = {
evenOrOdd (state) {
return state.count%2===0 ? "偶数": "奇数";
}
}
export default new Vuex.Store({
state,//状态对象
mutations,//包含多个更新state函数的对象
actions,//包含多个对应事件回调函数的对象
getters//包含多个getter计算属性函数的对象
}
)
2. Componente App.vue
<template>
<div>
<p> clicked {
{$store.state.count}} times, count is {
{evenOrOdd}}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">increment if odd</button>
<button @click="incrementAsync">increment asnyc</button>
</div>
</template>
<script>
export default {
computed: {
evenOrOdd() {
return this.$store.getters.evenOrOdd;//evenOrOdd为回调函数，不需要在后面加括号
}
},
methods:{
//count增加1
increment() {
//通知vuex去增加
this.$store.dispatch("increment");//触发store中对应的actions调用
},
//count减少1
decrement() {
this.$store.dispatch("decrement")
},
//如果是奇才增加
incrementIfOdd() {
this.$store.dispatch("incrementIfOdd")
},
//过1秒才增加
incrementAsync() {//异步增加：每一秒count增加1
this.$store.dispatch("incrementAsnyc")
}
}
}
</script>
3. Entrada Main.js (uma vez que a loja é escrita no modelo para usar o componente, todos os subcomponentes terão o atributo $ store (objeto da loja))
import Vue from "vue"
import App from "./App"
//引入vuex.js文件
import store from "./store"
new Vue({
el:"#app",
components:{
App
},
template: "<App/>",
store//所有组件都会多一个对象 $store
})