📒Vuex 学习笔记

奥特曼说要相信光

2021-10-09 116 阅读1分钟

定义：一个专门为Vue开发状态管理工具。

核心概念

State

可以理解成是Vue的data属性; Vuex核心主要就是对这里面的值获取及操作.

定义：

使用:

基础使用： this.$store.state.name
使用辅助函数mapState 放在计算属性中,免去this.$store.state.xxx写法:
包含在modules模块里面带命名空间的使用

目前了解只有state才是这种返回函数的形式{state => state.xxx.xx}

Getter

官方名叫修饰器；类似Vue的计算属性，依赖state。 定义：

使用：

基础使用： this.$store.getters.getMessage
使用辅助函数mapGetter：
带参数的情况：

包含在modules模块里面带命名空间的使用

    computed: {
        ...mapGetters({
            getMessage1: 'xxx/xxx/getMessage1',
            getMessage2: 'xxx/xxx/getMessage2'
        })
    }

Mutations

里面是一些修改state的值的方法，方法里的操作必须是同步的。 定义： 使用：

基础使用：this.$store.commit('setNumber', 666)
辅助函数（包含了命名空间的情况）

   methods: {
       ...mapMutations({
           foo1: 'xxx/xxx/foo1',
           foo2: 'xxx/xxx/foo2'
       })
   }

注意是在methods中使用，且方法里的操作必须是同步的。

Actions

里面的方法操作都是异步的，操作完之后改变state还是需要掉用Mutations里的方法。

定义：

使用：

基础使用：this.$store.dispatch('setNum', 'xxx')

辅助函数（包含命名空间情况）：

参考链接: 手把手教你使用Vuex，猴子都能看懂的教程