1.2.3 vuex的使用与常用操作

Vue介绍

提供状态管理

提供组件通信

使用

Module

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  namespaced: true, // 命名空间
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

mapState

import { mapState } from 'vuex';
 computed: {
    ...mapState('router', [
        'routers'
    ])
},

mapActions

import { mapActions } from "vuex";
methods: { 
        ...mapActions('router', [
             'setRouters'
   ]),
},