vuex的module模块用法示例

当我们的应用程序逐渐复杂化，我们需要管理应用程序中不同组件之间的状态，这时候Vuex就显得尤为重要。Vuex是一个由Vue.js官方提供的插件，为Vue.js应用程序提供了集中式的状态管理。

而Vuex的module模块是Vuex中非常重要的一个概念，可以用于更好的管理Vuex的状态，避免不必要的冲突，以下是module模块使用的攻略。

创建module模块

我们可以使用Vuex.Store()并且传入modules选项创建一个带有module模块的store，并且使用Vue.mixin()混入store，来让每个组件都能够访问它。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 0
}

const mutations = {
  increment(state) {
    state.count++
  }
}

const moduleA = {
  state: {
    count: 10
  },
  mutations: {
    increment(state) {
      // 这里的state指向moduleA中的state状态
      state.count++
    }
  }
}

const moduleB = {
  state: {
    count: 20
  },
  mutations: {
    increment(state) {
      // 这里的state指向moduleB中的state状态
      state.count++
    }
  }
}

export default new Vuex.Store({
  state,
  mutations,
  modules: {
    moduleA,
    moduleB
  }
})


// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store, // 混入store
  render: h => h(App),
}).$mount('#app')

在这个例子中，我们为Vuex创建了一个store，并使用module模块来管理不同的状态。我们在store.js文件中创建了一个包含state和mutations的对象，以及两个不同的module模块moduleA和moduleB。

在Vue实例中，我们将store混入到每个组件中。现在，我们可以在任何Vue组件中通过this.$store来访问store中的状态，包括module模块中的状态。

使用module模块

现在，我们来学习如何访问module模块中的状态和修改状态。我们可以通过对应的属性来访问模块的状态，以及在模块内部定义mutations来修改这些状态。

// Component.vue

<template>
  <div>
    <p>Count from store: {{ count }}</p>
    <p>Count from moduleA: {{ countA }}</p>
    <p>Count from moduleB: {{ countB }}</p>
    <button @click="incrementFromStore">Increment store</button>
    <button @click="incrementFromModuleA">Increment moduleA</button>
    <button @click="incrementFromModuleB">Increment moduleB</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
    countA() {
      return this.$store.state.moduleA.count
    },
    countB() {
      return this.$store.state.moduleB.count
    }
  },
  methods: {
    incrementFromStore() {
      this.$store.commit('increment')
    },
    incrementFromModuleA() {
      this.$store.commit('moduleA/increment')
    },
    incrementFromModuleB() {
      this.$store.commit('moduleB/increment')
    }
  }
}
</script>

在这个组件中，我们通过计算属性来访问store和moduleA和moduleB中的状态，以及在Methods选项中使用commit来调用mutations方法来修改这些状态。

以上是使用Vuex的module模块的攻略和一些示例，希望能够帮助你更好的掌握Vuex的module模块。