A premissa de usar vuex é que você deve ter um certo entendimento de vue.E o uso simples de vue-roteador Este artigo faz um caso de uso simples de vuex com base no acima .
Introdução
A primeira coisa que você precisa entender é a máquina de gerenciamento de estado vuex, que na verdade é equivalente a um armazém de loja. Quando este armazém é colocado, alguns estados que precisam ser chamados em várias ocasiões são equivalentes a alguns atributos compartilhados e ao estado de vuex O armazenamento é responsivo, o que significa que se o estado na loja mudar, essa mudança será refletida dinamicamente no componente que você chama de estado; a outra é que você não pode alterar diretamente o estado na loja, a única maneira é enviando mutações (mutação) nos ajudará a rastrear cada mudança de estado, para entender melhor nossa aplicação.
Deixe-me usá-lo junto abaixo:
1. Instalação
Você precisa baixar o vuexnpm install vuex --save
<script src="./vuex.min.js"></script>
Ou consulte-o diretamente através do cdn
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/0.4.1/vuex.min.js"></script>
Nota: vuex é baseado em promessas, alguns navegadores não suportam promessas (como o IE), então você pode mudar diretamente para um navegador como o Google ou Firefox.
Se você construiu uma estrutura usando vue-cli, então você também precisa declare isso
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
2. Crie uma loja de armazém
// 新建一个仓库
// 实例化vuex
var store = new Vuex.Store({
// 存储共享的数据 // 状态机
state:{
a：{}
},
// 获取数据
getters:{
},
// 突变
mutations:{
// 同步修改数据
resetA(state,a){
state.a = a;
}
},
// 动作
actions:{
// 异步操作
findA(context,data){
//在执行findA的时候可以通过data传参
// 进行异步操作，并且将返回的结果通过赋值给a
//context是上下文的意思，和store一样，但又不是store，通过commit()进行提交突变，改变a的值
context.commit('resetA',a);
}
}
})
Após a criação simples e rude, agora você pode obter o objeto de estado por meio de store.state e acionar a mudança de estado por meio do método store.commit:
store.commit('increment')
console.log(store.state.count) // -> 1
** Nota: ** A operação que aciona a mudança de estado deve ser em ações
3. Se você deseja acessar a loja na instância vue, você precisa injetar a loja na instância vue e usar este. $ Store para acessar sua propriedade
new Vue({
el: '#app',
//注入store
store: store,
})
4. Podemos enviar uma mudança nas ações
methods: {
increment() {
this.$store.commit('increment')
console.log(this.$store.state.count)
}
}
5. No final, ainda temos que fazer uma operação assíncrona. Costumávamos implementá-la diretamente em métodos na instância vue, como:
methods:{
login(){
},
logout(){
}
},
E agora nossa operação assíncrona é colocada em ações, então como devemos deixá-lo executá-la?
Neste momento, precisamos de nosso método this. $ Store.dispatch () para distribuir esta operação assíncrona, deixá-la executar e colocá-la Os métodos nos métodos da instância vue pode ser vinculado a um evento e executado como antes.
methods:{
login(){
this.$store.dispatch("login",this.list).then((res)=>{
})
},
logout(){
}
},
6. Às vezes, precisamos operar nos dados no estado da loja, como dados a
computed:{
a(){
return this.$store.state.a;
}
},
Ou você pode obtê-lo por meio de getters
computed:{
newA(){
return this.$store.getters.newA;
}
},
Também podemos obtê-lo por meio da função auxiliar da máquina de estados.
Será muito simples desta forma
. Após a utilização da função auxiliar, o funcionamento deste. $ Store será completamente separado.
//需要把mapState从vuex中解构出来
import { mapState } from 'vuex'
computed: {
...mapState(["a"])
// 映射 this.a 为 store.state.a
}
Semelhante a getters e ações e estado, eles são
implementados por meio de duas funções auxiliares , mapGetters e mapActions.
A diferença é que mapActions são escritos em métodos, ou seja, métodos.
Chame diretamente por meio deste nome de método em vez de chamar de. $ Store.dispatch.