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和其他的模块,