Vuex进行多组件共享状态

发表于 | 分类于 |
字数统计: 412 | 阅读时长 ≈ 1

Vuex里的数据都是响应式的，任何组件使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。

5个字段：

  • state
  • mutations：同步方法
  • actions：异步方法
  • getters
  • modules

Vuex很像是一种与开发者的约定，涉及数据改变的 用mutations，存在业务逻辑的 用actions

state

在组件内，来自store的数据只能读取，不能手动改变，改变store中的数据的唯一途径就是显式地提交mutations

可以通过this.$store.state.count进行调用

mutations

在组件内，通过this.$store.commit(事件名)来执行mutations.

很像JavaScript的观察者模式，组件只负责提交一个事件名，Vuex对应的mutations来完成业务逻辑

mutations中的方法还可以接受第二个参数，可以是数字，字符串或对象等类型

getters

用法和组件中的计算属性类似，getter也可以依赖其他的getter，把getter作为第二个参数

比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
const store = new Vuex.Store({
    state: {
        list: [1,5,8,10,30]
    },
    getters: {
        filteredList: state => {
            return state.list.filter(item => item < 10)
        },
        listCount: (state,getters) => {
            return getters.filteredList.length
        }
    }
})

actions

不同的是actions里提交的是mutation，并且可以异步操作业务逻辑

action在组件内通过$store.dispatch触发

比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//main.js
mutations: {
    increment (state,n = 1) {
        state.count += n
    }
},
actions: {
    asyncIncrement (context){
        return new Promise(resolve => {
            setTimeout(() => {
                 context.commit('increment')
                resolve()
            },1000)
        })
    }
}

//index.vue
methods: {
    handle() {
        this.$store.dispatch('asyncIncrement')
    }
}

modules

用来将store分割到不同的模块，每个module拥有自己的state，getters，mutations，actions.而且可以多层嵌套。