state
Vuex的基本数据,用来储存数据和操作数据
state: {
userInfo: '',
}
如何获取vuex的state对象中的属性呢?
方法一:插值表达式
1.$store.state.count
2.需要依赖vue的computed计算属性来实现。在vue的实际应用中,computed属性可以在输出前,对data中的值进行改变,因此,我们就是利用computed的这一特性,在组件中获取vuex的state对象中的属性
方法二:利用vuex的mapState数组形式的方法来获取
1.导入import { mapState } from ‘vuex’
2.使用computed
computed: {
//使用展开运算符遍历…
...mapState(['userInfo'])
}
3.在需要渲染的地方使用双向绑定或插值语法 userInfo.xxx 取值
getters
getters从基本数据(state)派生的数据,相当于state的计算属性,可以用来获取数据,mapgetter经常在计算属性中被使用
Mutations
提交更新数据的方法,以同步的方式储存
mutations: {
setUserInfo (state, value) {
state.userInfo = value
},
}
使用commit改变state数据
this.$store.commit('setUserInfo' , res.data.data)
actions
异步的方式存储,无法直接修改仓库中的值,需要通过同步到mutations
actions: {
# refresUserInfo是变量名可自定义
refresUserInfo (store) {
auInfo() //封装的获取用户信息函数
.then(res => {
store.commit('setUserInfo', res.data.data) //使用Mutations的commit改变state数据
})
.catch(() => {})
}
使用this.$store.dispatch(‘方法名’) 调用
在需要的地方直接调用该方法,可以减少代码代码冗余问题
modules
模块化,可以理解成把一个仓库拆解或者开小房间存储,每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
喜欢就支持以下吧