前端状态管理--vuex

store

getters
mutations
actons

状态管理

子组建和父组建如何传递信息
简单来说,就是有些数据是需要在多个组建中来访问

Vuex

image.png

Store

state

初始化数据

getters

why:
如果没有getters,1、我们需要在components中在我们的status中取数据,所以对于一般的用法,那么我么么就会这么使用,this.$status.state.someValue,为了能够将数据从系统中分离开来,getters,在getter中定义取何数据,如何取。
2、如果需要修改一个数据的获取方式,那么我们只需要在getter的方法中修改(tips:其实取决于如何设计,也就是说在取数据的时候要尽量保证系统的不变性)

Mutations

定义如果修改status
用法
store.dispatch(‘changeMessage’, ‘newMessage’)
最佳实践:看到这用的是str型取调用mutations中的方法,可以在mutations中将其作为,将该字符串定义成一个常量

actions

刚还是的时候,并不理解为什么需要有actions,现在才明白,mutations实际上是对状态进行修改,所以在代码任何需要修改的地方,都需要调用mutations中提供的方法,如果修改的比较多,一般的做法就是将这些修改抽象成一个单独的函数,那么这个函数我们可以理解成actions。
我们可以看到actions、getter实际上是展示给用户,我们需要什么,我们要修改什么,这个是业务层面,而status、或者是mutations实际上是底层修改的。

最佳实践,可以看到actions连接的是backend,所以在actions层,我们需要取调用api的一些东西。

“Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
实践中,我们会经常用到 ES2015 的 参数解构 来简化代码(特别是我们需要调用 commit 很多次的时候):

1
2
3
4
5
6
7
8
9
actions: {
userSignin({commit}, user) {
console.log("xxx")
commit(USER_SIGNIN, user)
},
[USER_SIGNOUT]({commit}) {
commit(USER_SIGNOUT)
}
}
坚持技术分享,您的支持将鼓励我继续创作!