Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，单一状态树,通俗理解就是一个应用的数据集合，可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作。详情官方解释。
Vuex的组成
Vuex分成五个部分：
- State：单一状态树
- Getters：状态获取
- Mutations：触发同步事件
- Actions：提交mutation，可以包含异步操作
- Module：将vuex进行分模块
前四个特征就是核心。
正如官网vuex图示，Vuex的数据总是“单向流动”
- 用户访问页面并触发action
- action提交mutation事件
- mutation事件更改state状态
- state状态改变后更新页面(vue comptents)
Vuex 规定，属于应用层级的状态只能通过 Mutation 中的方法来修改，而派发 Mutation 中的事件只能通过 action。
用法
从左到右，从组件出发，组件中调用 action，在 action 这一层级我们可以和后台数据交互，比如获取初始化的数据源，或者中间数据的过滤等。然后在 action 中去派发 Mutation。Mutation 去触发状态的改变，状态的改变，将触发视图的更新。
注意事项
- 数据流都是单向的
- 组件能够调用 action
- action 用来派发 Mutation
- 只有 mutation 可以改变状态
- store 是响应式的，无论 state 什么时候更新，组件都将同步更新
方式
方式一：可以将state，getter，mutation，action写到一个store.js文件中可以参考
方式二：在src目录下我们创一个vuex文件夹，分别创建index.js,mutations.js,state.js,getters.js,actions.js可以参考
这里以方式一进行实例
State
在 store 中的 state 对象，可以理解为 Vue 实例中的 data 对象，它用来保存最基本的数据。
import Vue from 'Vue';
import Vuex from 'Vuex';
Vue.use(Vuex);
let store = new Vuex.Store({
state: {
count: 0,
}
});
如果希望Vuex状态更新，相应的Vue组件也得到更新，最简单的方法就是在Vue的computed（计算属性）获取state
// Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count;
}
}
}
上面的例子是直接操作全局状态store.state.count，那么每个使用该Vuex的组件都要引入。为了解决这个，Vuex通过store选项，提供了一种机制将状态从根组件注入到每一个子组件中。
// 根组件
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const app = new Vue({
el: '#app',
store,
components: {
Counter
},
template: `
<div class="app">
<counter></counter>
</div>
`
})
通过这种注入机制，就能在子组件Counter通过this.$store访问：
// Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
mapState函数
computed: {
count () {
return this.$store.state.count
}
}
这样通过count计算属性获取同名state.count属性，是不是显得太重复了，我们可以使用mapState函数简化这个过程。
import { mapState } from 'vuex';
export default {
computed: mapState ({
count: state => state.count,
countAlias: 'count', // 别名 `count` 等价于 state => state.count
})
}
还有更简单的使用方法：
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
Getters
当需要对 store 中的数据进行处理，或者需要对处理后的数据在多个组件进行复用，就可以使用 Getters 来处理，Getters 也可以理解为 Vue 中的计算属性 (computed)。如下：
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
如果多个组件都要进行这样的处理，那么就要在多个组件中复制该函数。这样是很没有效率的事情，当这个处理过程更改了，还有在多个组件中进行同样的更改，这就更加不易于维护。
Vuex中getters对象，可以方便我们在store中做集中的处理。Getters接受state作为第一个参数：
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
在Vue中通过store.getters对象调用。
computed: {
doneTodos () {
return this.$store.getters.doneTodos
}
}
Getter也可以接受其他getters作为第二个参数：
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
mapGetters辅助函数
与mapState类似，都能达到简化代码的效果。mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
上面也可以写作：
computed: mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
所以在Vue的computed计算属性中会存在两种辅助函数：
import { mapState, mapGetters } from 'vuex';
export default {
// ...
computed: {
mapState({ ... }),
mapGetter({ ... })
}
}
Mutations
之前也说过了，更改Vuex的store中的状态的唯一方法就是mutations。
每一个mutation都有一个事件类型type和一个回调函数handler。
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
调用mutation，需要通过store.commit方法调用mutation type：
store.commit('increment')
Payload 提交载荷
也可以向store.commit传入第二参数，也就是mutation的payload:
mutaion: {
increment (state, n) {
state.count += n;
}
}
store.commit('increment', 10);
单单传入一个n，可能并不能满足我们的业务需要，这时候我们可以选择传入一个payload对象：
mutation: {
increment (state, payload) {
state.totalPrice += payload.price + payload.count;
}
}
store.commit({
type: 'increment',
price: 10,
count: 8
})
mapMutations函数
不例外，mutations也有映射函数mapMutations，帮助我们简化代码，使用mapMutations辅助函数将组件中的methods映射为store.commit调用。
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment' // 映射 this.increment() 为 this.$store.commit('increment')
]),
...mapMutations({
add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
})
}
}
注 Mutations必须是同步函数。
如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了。
Actions
与 mutations 类似，不同模块的 actions 均可以通过 store.dispatch 直接触发。
const moduleA = {
state: {
count: 1
},
mutations: {
sayCountA(state) {
console.log('Module A count: ', state.count);
}
},
actions: {
maAction(context) {
context.dispatch('mbAction');
}
}
};
const moduleB = {
state: {
count: 2
},
mutations: {
sayCountB(state, num) {
console.log('Module B count: ', state.count+num);
}
},
action: {
mbAction({ commit, rootState }) {
commit('sayCountA');
commit('sayCountB', rootState.a.count);
}
}
};
const store = {
modules: {
a: moduleA,
b: moduleB
}
};
store.dispatch('maAction'); // Module A count: 1、Module B count: 3
action 的回调函数接收一个 context 上下文参数，context 包含：1. state、2. rootState、3. getters、4. mutations、5. actions 五个属性，
Module
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
场景
个人认为vuex适合运用于一个视图内组件与组件之间的组合传递，不适用于跨页面，但是可以共用，为了不因用户刷新页面，要进行初始化再次调用。在自己写一些Ui组件给大家或者开源用的话，不适用于写在vuex中，应该暴露所接收的Props,通过$emit来进行触发事件，一些关键性全局状态，不也适合存vuex中，你可以选择localStorage,sessionStorage。
