The premise of using vuex is that you must have a certain understanding of vue. And the simple use of vue-router This article makes a simple use case of vuex on the basis of the above .
Introduction
The first thing you need to understand is the vuex state management machine, which is actually equivalent to a store warehouse. When this warehouse is placed, some states that need to be called on multiple occasions are equivalent to some shared attributes and the state of vuex Storage is responsive, which means that if the state in the store changes, this change will be dynamically reflected in the component you call this state; the other is that you cannot directly change the state in the store, the only way is through Submitting mutations will help us track every state change, so as to better understand our application.
Let me use it together below:
1. Installation
You need to download vuexnpm install vuex --save
<script src="./vuex.min.js"></script>
Or refer to it directly through cdn
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/0.4.1/vuex.min.js"></script>
Note: vuex is based on promises, some browsers do not support promises (such as IE), then you can directly change to a browser such as Google or firefox.
If you have built a framework using vue-cli, then you also need to declare it
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
2. Create a warehouse store
// 新建一个仓库
// 实例化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);
}
}
})
After the simple and crude creation is completed, you can now get the state object through store.state, and trigger the state change through the store.commit method:
store.commit('increment')
console.log(store.state.count) // -> 1
**Note:** The operation that triggers the state change should be in actions
3. If you want to access store in the vue instance, you need to inject store into the vue instance and use this.$store to access their property
new Vue({
el: '#app',
//注入store
store: store,
})
4. We can submit a change in actions
methods: {
increment() {
this.$store.commit('increment')
console.log(this.$store.state.count)
}
}
5. In the end, we still have to do an asynchronous operation. We used to implement it directly in methods in the vue instance, such as:
methods:{
login(){
},
logout(){
}
},
And now our asynchronous operation is placed in actions, then how should we let him execute it? At
this time, we need our this.$store.dispatch() method to distribute this asynchronous operation, let it execute, and put it The methods in the methods in the vue instance can be bound to an event and executed as before.
methods:{
login(){
this.$store.dispatch("login",this.list).then((res)=>{
})
},
logout(){
}
},
6. Sometimes we need to operate on the data in the state in the store, such as data a
computed:{
a(){
return this.$store.state.a;
}
},
Or you can get it through getters
computed:{
newA(){
return this.$store.getters.newA;
}
},
We can also get it through the auxiliary function of the state machine. It
will be very simple in this way
. After the auxiliary function is used, the operation on this.$store will be completely separated.
//需要把mapState从vuex中解构出来
import { mapState } from 'vuex'
computed: {
...mapState(["a"])
// 映射 this.a 为 store.state.a
}
Similar to getters and actions and state, they are
implemented through two auxiliary functions , mapGetters and mapActions.
The difference is that mapActions are written in methods, namely methods.
Call directly through this. method name instead of calling this.$store.dispatch.