vuex原理与实例运用

mvvm响应式原理

一个属性给它一个dep，例如name,age。dep里面放subs也就是哪些地方用到了name，age属性，subs是数组里面放watcher，compile里面用到了几次name和age，就生成watcher，然后把他放到dep里的subs里，只要数据发生改变，例如，name从why改成了kobe，这个时候，object.defineprototye马上就能监听到改变，这个时候触发notify，遍历subs，然后调用wather里的update函数，然后改变view中的样式

vuex是用来管理组件的共同需要用的数据，vuex中管理的状态都是响应式的

这种方法也可以多个组件用同一个对象，但是这种方法不是响应式的 ，所以就有了vuex

什么时候后需要用到状态管理那？

 先来看一下单页面状态管理

 

现在，我们再创建一个hellovuex.vue，（他为app.vue的子组件），如果这个时候，hellovuex.vue想用app.vue中的counter数据，可以通过props传递

 

 这是以前的思路，现在我们用上vuex来做

首先安装vuex

npm  install vuex --save

view-router的东西都放在router文件夹下面，那vuex的东西也放到一个文件夹下面，这个文件夹一般是store，

 

 当我在组建中想用到counter的时候通过$store来获取

 

 

 不建议从组件中直接修改state，action是用来执行异步操作的

mutation 使用

 在app.vue中方法中commit去调用在vuex中要做的操作

 当我想通过传入的参数一次执行多次的时候

 mutation传参

 两种提交风格

 mutation响应规则

 删除必须通过Vue.delete

 添加必须通过vue.set这种方法添加state里的值，不然添加的内容就不是响应式的

 

mutation同步函数

vuex推荐使用单一状态树来保存数据，也就是只有一个store对象，其实搞多个store对象也可以，但是vuex不推荐

Getter的使用

 

 action

 也可以传递参数

 vuex中的module

 

 

 module中的mutation和store中的mutation一样的直接this.$store.commit

 vuex中store里面的内容太多了不便于我们进行管理

 除了state在index文件中修改一下，mutation，actions，getters，都创建一个新的文件用来保存他们，module创建一个文件夹，下面放moduleA和其他的模块，