vuex的五个属性及使用方法

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
喜欢就支持以下吧
点赞0
分享
评论 抢沙发