Vue vuex的使用

1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，简单来说就是存储和管理各个组件想用的一些公共对象等。
2.vux的基本使用
1)新建的项目基于脚手架2，打开终端通过命令npm install vuex --save安装vuex
2）store相关的js文件
3）App.vue
4)将store挂载到vue实例上

5）运行结果

3.vuex有这几个比较核心的概念，State,Getters,Mutation,Action和Module,State上面例子有，主要讲后四个，下面从Getters开始
1)Getters
1.1）store相关js文件里定义一个books数组，以及一个getter
1.2)界面取值

1.3）结果

2)Mutation，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
1.1）前面演示过mutation的用法里，下面讲一下它除了一个参数，还还可以传多个参数

1.2)store的js文件

1.3）结果
1.4)除此之外，mutations还有一种提交风格，对象提交风格，也就是mutation和参数都封装到一个对象里，参数后默认被传到payload里，取值通过payload.属性名即可
1.5）mutation
注意：既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：
1.最好提前在你的 store 中初始化好所有所需属性。
2.当需要在对象上添加新属性时，你应该使用 Vue.set(obj, ‘newProp’, 123), 或者以新对象替换老对象。例如，利用对象展开运算符我们可以这样写：

state.obj = { ...state.obj, newProp: 123 }

3)Action，Action类似于mutation,action实际上就是提交mutation,但是Action可以包含任意的异步操作，mutation只可以进行同步操作
3.1）action实例
3.2）触发action
3.3)结果
3.4）模拟异步请求
3.5）Actions 支持同样的载荷方式和对象方式进行分发：
3.6）action

3.7)结果，分别显示3,5,10

4)Module，模块A和模块B的内容互不干涉，在大型项目，分模块开发是一件必定的事件
4.1）创建两个子模块

4.2）页面取值显示

4.3）结果