vuex知识

vuex知识

vuex是什么

它是一个专门为vue.js应用程序开发的状态管理模式。它采用集中管理应用的所有组件状态，并以一定规则保证状态以一种可预测的方式发生变化。

开始

每个vuex应用的核心就是store（仓库）。‘store’基本上就是一个容器，它包含这你的应用中大部分的状态（state ）

注意事项：1、不能直接改变store中的状态，改变store中的状态唯一途径就是显示提交mutations；2、有时记得在根实例中注册store选项，这样该store实例才会注入到根组件中的所有子组件中！

基础例子

实例

核心概念

state

单一状态树

· 用一个对象就包含了全部的应用层级状态，因此在调试时我们可以轻易获得整个当前应用状态的快照。值得一提的是，单状态树和模块化并不冲突，后面会讲到如何将状态和状态事件变更分布到各个子模块中。

在Vue组件中获得vuex状态

· 例子

• 实例

mapState辅助函数

· 作用：上述例子中，我们在computed中需要写return this.$store.state.count 这样的繁琐的语句，使用了mapState，我们直接写 state=>state.count 即可，甚至当计算属性名和state的子节点名称相同时，只要写成 'count'即可。

• 简写成 state=> state.count 形式（花括号）

• 实例

• 简写成‘count’形式（中括号）

• 实例

对象展开运算符

组件仍然保有局部状态

getters

作用：在数据展示之前对数据进行一种再编辑，也就是对数据进行过滤或加工，说白了它相当于store的计算属性；（当很多组件都需要用到某个属性时，我们不可能把所有的函数复制一遍或者抽取一个共享函数然后多处导入它，这样太麻烦了，因此vuex引入了getter。）

注意事项：getters接受的第一个参数是state，getters也可以接受其它getters作为第二个参数。

例子

· 实例

mutations

作用：更改store中的状态的唯一方法就是提交mutations。

说明：mutations有点类似于事件。每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方 ，并且它会接受state作为第一个参数。

注意事项：1、mutations必须是同步函数！2、其接受的第一个参数是state

例子

· 实例1

actions

与mutations关系：其与mutations类似，但与mutations不同的是 1、其不能不是直接修改状态，而是提交给mutations；2、其能够包含任意异步操作，但mutations不能，mutations只能是同步的

例子

· 实例

modules

例子

· 实例

补充图示说明

图示

项目结构

插件

严格模式

表单处理

测试

热重载