vue2 vuex 划分仓库后怎么存取数据

在Vue.js 2中使用Vuex划分仓库后，你可以按照模块的方式组织你的数据和相关逻辑。这样可以使你的代码更加结构化和模块化。

首先，你需要在创建store实例时使用`modules`选项来划分仓库。每个模块都有自己的state、mutations、actions和getters。

以下是划分仓库的示例代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const moduleA = {
  state: {
    // 模块A的state
    countA: 0
  },
  mutations: {
    // 模块A的mutations
    incrementA(state) {
      state.countA++
    }
  },
  actions: {
    // 模块A的actions
    incrementA(context) {
      context.commit('incrementA')
    }
  },
  getters: {
    // 模块A的getters
    getCountA: state => state.countA
  }
}

const moduleB = {
  state: {
    // 模块B的state
    countB: 0
  },
  mutations: {
    // 模块B的mutations
    incrementB(state) {
      state.countB++
    }
  },
  actions: {
    // 模块B的actions
    incrementB(context) {
      context.commit('incrementB')
    }
  },
  getters: {
    // 模块B的getters
    getCountB: state => state.countB
  }
}

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

export default store

现在，你可以在你的Vue组件中按模块的方式来存取数据：

1. 使用`this.$store.state.moduleA`来获取模块A中的state数据：

this.$store.state.moduleA.countA

2. 使用`this.$store.commit`来触发模块A中的mutations方法，修改state数据：

this.$store.commit('moduleA/incrementA')

3. 使用`this.$store.dispatch`来触发模块A中的actions方法，间接地修改state数据：

this.$store.dispatch('moduleA/incrementA')

4. 使用`this.$store.getters`来获取模块A中的getters数据：

this.$store.getters['moduleA/getCountA']

同样地，你也可以使用类似的方式来存取模块B中的数据。

通过这种方式，你可以更好地组织和管理你的Vuex仓库，使代码更加清晰和可维护。