For the project to the current I contact, there are a lot after login or store users' personal information is stored vuex in the same interface components pass after a sub-component developer page request.
Red box is vuex relevant documents.
Then first talk about the theory of it.
This state of self-management application contains the following sections:
state, the driving source of the application data;
view, declaratively mapped to the view state;
Actions, in response to user input on the view state variations.
1.state
State are stored in the state or variable.
In this example, the project is stored a lot of data and status.
If we write in vuex data, you want to be referenced assembly, you need to reference the components you need in.
import { mapState} from 'vuex'
// Calculation of the attribute name when mapping state child node with the same name, we can give mapState pass a string array.
computed: mapState([
// map this.count to store.state.count
'Count' (this is your declared in vuex variable name in the stats)
])
// mapState function returns an object. How do we calculate it is mixed with a local property to use it? In general, we need to use a tool function combine multiple objects into one, so that we can pass the final target computed property. But with the introduction of the object is expanded operator (ECMAScript proposal is now in the stage-4 stages), we can greatly simplify the wording:
computed: {
...mapState({
// ...
})
}
2.getters
getters：对数据获取之前的再次编译，可以理解为state的计算属性。
下图为例，对state中的navSizeControl这个数据进行再加工。
通过属性访问
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值。
let xxx = this.$store.getters.xxxxxxx
在组件中使用getters
首先在vuex中
myCount(state){
return 123
}
在组件中引用
import { mapGetters } from 'vuex';
export default {
...
computed:{
...mapGetters({"myCount"})
}
}
3.Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
在组件中我们想把某一数据存入vuex中，就需要
文档是这么说的：
你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法。
他说这么一堆，我特么也没咋看懂啊！！！就是用 commit就完了呗。
官方文档继续说了，这次我看懂了！
Mutation 需遵守 Vue 的响应规则
既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：
最好提前在你的 store 中初始化好所有所需属性。
当需要在对象上添加新属性时，你应该
使用 Vue.set(obj, ‘newProp’, 123), 或者
以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：
state.obj = { ...state.obj, newProp: 123 }
在组件中提交Mutation ：
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
someThing(){
//第一种调用方法
this.$store.commit('increment') //把vuex中的Mutation传进来，然后进行操作，increment是Mutation中的方法，直接调用。并且可以修改vuex中的state的值。
// 第二种调用方法
this.increment()
}
}
}
Mutation 必须是同步函数：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
如果要写入异步函数，就需要接下来出场的人了。Action！
4.Action
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
在vuex中，actions访问mutation需要用到context.commit
例子如下：
actions：{
myIncrease(context){
context.commit('increment')
也可以axios请求
}
}
在组件中使用action
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
}),
someThing(){
this.increment()
}
}
}