Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新.
必须遵守一些Vuex对应的规则
:初始化
好所需的属性.对象
添加新属性时, 必须使用下面的方式使其达到响应式效果
: 如下栗子中当我们点击更新信息时, 界面并没有发生对应改变.
如何才能让它改变呢?
查看下面代码的方式一和方式二都可以让state中的属性是响应式的.
为什么呢?原因是set将我们变化的数据也加入到了响应式系统里,我们的用新对象赋值则相当于让内部的观察者模式相关代码监听新的对象.
这里提到了Vue.set,不免重复一句,Vue.set和Vue.delete都是Vue提供的响应式删除数组,对象的方法,可以看看Vue官方网站提供的深入响应式原理
Vue不推荐直接在Mutation中进行异步操作,Mutation更多的只进行一些普通同步操作.
但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求(先请求后处理), 必然是异步的. 这个时候怎么处理呢? Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
Action基本用法
如上所示是Actions的基本用法,context是什么?
context是和store对象具有相同方法和属性的对象.
也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.但是注意, 这里它们并不是同一个对象.
先祭出这张图就大概知道如何调用和使用了,详细解释看下面
如上图,在Vue组件中, 如果我们调用actions
中的方法, 那么就需要使用dispatch
我们需要先在actions里进行异步操作,然后再从actions里进行commit
将异步操作后的数据传到Mutation里进行数据同步操作
Vue
使用单一状态树
,那么也意味着很多状态都会交给唯一 一个Vuex来管理.当应用变得非常复杂时,store对象就有可能变得相当臃肿.因此
Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等
,如下图所示
如上图最后所示,如果我们想用store里的modules定义的module.我们可以用this.$store.state.a...
为什么呢?
因为我们的modules会被自动注册到我们的state里,我们可以当成一个变量使用,不必提前定义好.
this.$store.commit('addNumber',5)
,这也要求我们不管是各个地方方法都不要取一样的. $store.getters.getsumab
Vuex帮助我们管理过多的内容时, 好的项目结构可以让代码更加清晰.
参考小码哥 CodeWhy