一文带你搞懂Vue中Vuex的使用

引言

在Vue.js的应用中，Vuex是一个非常强大的状态管理工具。它通过集中式存储管理应用的所有组件的状态，使得组件间的数据共享和管理变得非常简单和高效。本文将带您深入了解Vuex，理解其核心概念和API的使用方法，以及如何在Vue.js的应用中使用Vuex进行状态管理。

核心概念

State：状态存储对象，用于存储应用中的所有状态。
Getter：计算属性，用于获取和处理State中的数据。
Mutation：状态变更的唯一来源，用于修改State中的数据。
Action：可以包含任意异步操作的函数，用于提交Mutation进行状态变更。
Module：将State、Getter、Mutation、Action分别封装在不同的模块中，便于管理和维护。

项目结构

在使用Vuex时，我们需要按照一定的目录结构来组织我们的代码。一般情况下我们会按照以下方式组织：

├── src
│   ├── App.vue
│   ├── main.js
│   ├── components
│   │   ├── Counter.vue
│   │   ├── HelloWorld.vue
│   │   ├── NavBar.vue
│   ├── store
│   │   ├── index.js
│   │   ├── modules
│   │   ├── mutations.js
│   │   ├── actions.js
│   │   ├── getters.js

其中，store中包含了Vuex的核心代码。modules、mutations、actions、getters等文件夹中则包含了不同的模块代码。

创建一个Store

Vuex提供了一个创建store的函数Vuex.Store()，我们需要在主入口文件main.js中创建一个store实例。在下面的示例中，我们创建了一个Counter模块和一个User模块，并且在store/index.js中定义了一个根store：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import counter from './modules/counter'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    counter,
    user
  }
})

我们要在main.js中引入该store并将其注入到根组件中：

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

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

我们创建的store实例中，包含了根状态的State、Getter、Mutation和Action，以及counter和user的模块。在处理状态时，我们可以在组件中直接调用State和Getter，也可以通过Mutation提交对State的操作或通过Action提交Mutation来变更State状态，具体的实现示例将在下文中进行详细讲解。

使用State和Getter

我们通过State和Getter可以轻松地管理和访问状态。

在下面的示例中，我们通过State来管理应用当前的语言环境（Locale）：

// store/modules/user.js
import { mapState } from 'vuex'

const state = {
  locale: 'zh-CN'
}

// getters
const getters = {
  currentLocale: state => state.locale.toUpperCase()
}

const mutations = {
  SET_LOCALE(state, payload) {
    state.locale = payload
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations
}

// components/NavBar.vue
<template>
  <nav>
    <button @click="setLocale('zh-CN')">中文</button>
    <button @click="setLocale('en-US')">English</button>
    <p>Current Locale: {{ currentLocale }}</p>
  </nav>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: mapState({
    currentLocale: state => state.user.locale.toUpperCase()
  }),
  methods: {
    ...mapMutations('user', ['SET_LOCALE']),
    setLocale(locale) {
      this.SET_LOCALE(locale)
    }
  }
}
</script>

从上面的代码可以看出，我们使用mapState()将当前组件所需的状态State映射到计算属性中，并且使用mapMutations()映射了一个SET_LOCALE函数到当前组件的methods对象中。我们可以在组件中调用SET_LOCALE函数来修改State的数据，而不是直接操作State来改变我们的状态数据。

使用Mutation和Action

Mutation和Action是Vuex中最重要的概念，它们用于改变State的状态。Mutation必须是同步函数，用于修改State中的数据，而Action则可以包含任意异步操作的函数，用于在条件判断时可以执行一系列的异步操作后再提交Mutation进行状态变更。

下面示例中，我们创建了一个counter模块，包含state、getters、mutations和actions，并在组件中使用这些模块中定义的函数来改变State的状态。

// store/modules/counter.js
const state = {
  count: 0
}

// getters
const getters = {
  count: state => state.count
}

// mutations
const mutations = {
  INCREMENT(state) {
    state.count++
  },
  DECREMENT(state) {
    state.count--
  }
}

// actions
const actions = {
  async incrementAsync({ commit }) {
    // 这里模拟异步操作
    return new Promise(resolve => {
      setTimeout(() => {
        commit('INCREMENT')
        resolve()
      }, 1000)
    })
  },
  async decrementAsync({ commit }) {
    // 这里模拟异步操作
    return new Promise(resolve => {
      setTimeout(() => {
        commit('DECREMENT')
        resolve()
      }, 1000)
    })
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

// components/Counter.vue
<template>
  <div>
    <h2>Counter: {{ count }}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="incrementAsync">+1 (Async)</button>
    <button @click="decrementAsync">-1 (Async)</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  computed: mapState({
    count: state => state.counter.count
  }),
  methods: {
    ...mapMutations('counter', ['INCREMENT', 'DECREMENT']),
    ...mapActions('counter', ['incrementAsync', 'decrementAsync']),
    increment() {
      this.INCREMENT()
    },
    decrement() {
      this.DECREMENT()
    }
  }
}
</script>

从上面的代码可以看出，我们使用mapState()将当前组件所需的状态State映射到计算属性中，同时使用mapMutations()和mapActions()映射了几个函数到当前组件的methods对象中。我们可以在组件中直接调用这些函数来改变State的数据。其中，incrementAsync和decrementAsync函数是包含异步操作的，通过promise对象完成异步操作后，提交Mutation进行状态变更。