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