Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这个状态自管理应用包含以下几个部分：
state: 驱动应用的数据源
view: 以声明方式将state映射到视图
actions: 响应在view上的用户输入导致的状态变化
1.安装
npm install vuex --save
or
yarn add vuex
2.使用
每一个 Vuex 应用的核心就是 store（仓库）。 "store"基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同：
-
Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。 - 你不能直接改变
store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
3.注册
在src下创建Vuex文件夹, 在文件夹中创建store.js 导入并注册
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
在main.js 中要进行引入
import store from './vuex/store'
new Vue({
el: '#app',
router,
// 把 store 对象提供给 "store" 选项，这可以把 store 的实例注入所有的子组件
store,
template: '<App/>',
components: { App }
})
4.项目中调用
在store文件中创建并导出
export default new Vuex.store ({
// 保存初始状态的地方
state: {
count: 0
},
// 定义方法改变状态的地方
mutations : {
// state 状态 num 传进来的参数
increment:(state, num) =>{
console.log(state)
state.count = num
}
}
})
5.调用状态
this.$store.state.count
// 可以在计算属性computed调用
computed: {
src() {
return this.$store.state.count
}
},
6.修改状态
this.$store.commit('increment', 10)
// 以载荷形式分发
this.$store.commit({
type: 'increment',
amount: 10
})
// 以对象形式分发
this.$store.commit('increment', {
amount: 10
})
7. action
Action 类似于mutation，不同在于：
Action提交的是mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
// 异步操作
actions: {
increments (context, num) {
context.commit('increment', num)
}
}
Action 函数接受一个与 store实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
8. 触发action
this.$store.dispatch('increments', 50)
9. Module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，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 的状态
