如何在 Vue 3 项目中使用 Vuex 进行状态管理？

在 Vue 3 中使用 Vuex 进行状态管理是一个很好的实践，特别是在涉及到多个组件间共享状态的情况。下面是如何在 Vue 3 项目中设置和使用 Vuex 的教程，包括 state, mutations, actions, getters 的概念及其用途。

1. 安装 Vuex

首先确保你的项目已经安装了 Vue CLI 并且是 Vue 3 版本。然后安装 Vuex 4.x：

npm install vuex@next --save

或使用 Yarn:

yarn add vuex@next --save

2. 初始化 Vuex Store

在 Vue 3 中，Vuex 的实现方式略有不同，主要在于使用 Composition API。创建一个名为 store.js 的文件，并初始化 Vuex：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});

export default store;

3. 配置 Vue 应用来使用 Vuex Store

在你的入口文件（通常是 main.js 或 main.ts）中配置 Vuex store：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

4. 在 Vue 组件中使用 Vuex

使用 State

使用 Composition API 来访问 Vuex 中的 state：

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();
const count = store.state.count;
</script>

使用 Mutations

Mutations 用来同步更新状态：

<template>
  <button @click="increment">Increment</button>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();

function increment() {
  store.commit('increment');
}
</script>

使用 Actions

Actions 提供了一个异步操作的场所，通常用来处理如网络请求等异步操作：

<template>
  <button @click="incrementAsync">Increment Async</button>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();

async function incrementAsync() {
  await store.dispatch('increment', { amount: 5 });
}
</script>

使用 Getters

Getters 提供了对状态的派生数据进行计算的功能：

<template>
  <div>{{ doubleCount }}</div>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();
const doubleCount = store.getters.doubleCount;
</script>

5. 总结

• State: 存储数据的地方，所有组件都可以访问这些数据。
• Mutations: 更新 state 的唯一方法，并且必须是同步函数。
• Actions: 提交 mutation 的方法，可以包含任意异步操作。
• Getters: 对 state 中的数据进行加工处理，返回新的衍生数据。

6. Vuex 辅助函数

在 Vue 3 中，你可以使用 Vuex 的组合式 API 来管理状态，这包括 useStore，mapState，mapGetters，mapActions 和 mapMutations 等辅助函数。然而，在 Vue 3 中，推荐使用 setup 函数和组合式 API (Composition API) 来组织逻辑。

useStore

useStore 是一个组合式 API 函数，返回当前 store 的引用。

import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    return { store };
  }
}

mapState

mapState 用于将状态映射到组合式 API 的返回对象。

import { mapState } from 'vuex';

export default {
  setup() {
    const { count } = mapState(['count'])();

    return { count };
  }
}

mapGetters

mapGetters 用于将 getter 映射到组合式 API 的返回对象。

import { mapGetters } from 'vuex';

export default {
  setup() {
    const { doubleCount } = mapGetters(['doubleCount'])();

    return { doubleCount };
  }
}

mapMutations

mapMutations 用于将 mutations 映射到组合式 API 的方法。

import { mapMutations } from 'vuex';

export default {
  setup() {
    const { increment } = mapMutations(['increment']);

    return { increment };
  }
}

mapActions

mapActions 用于将 actions 映射到组合式 API 的方法。

import { mapActions } from 'vuex';

export default {
  setup() {
    const { fetchCount } = mapActions(['fetchCount']);

    return { fetchCount };
  }
}

使用示例

假设你有一个名为 counter 的模块，并且你想在组件中使用它：

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

const getters = {
  doubleCount(state) {
    return state.count * 2;
  },
};

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

const actions = {
  async fetchCount({ commit }) {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 1000));
    commit('increment');
  },
};

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

在你的 Vue 3 组件中，你可以这样使用：

<template>
  <div>
    {{ count }}
    <button @click="increment">Increment</button>
    <button @click="fetchCount">Fetch Count</button>
  </div>
</template>

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

export default {
  setup() {
    const store = useStore();
    const { count } = mapState({ count: state => state.counter.count })();
    const { doubleCount } = mapGetters({ doubleCount: 'counter/doubleCount' })();
    const { increment } = mapMutations({ increment: 'counter/increment' });
    const { fetchCount } = mapActions({ fetchCount: 'counter/fetchCount' });

    return {
      count,
      doubleCount,
      increment,
      fetchCount,
    };
  },
};
</script>

注意事项

• 使用 mapState, mapGetters, mapMutations, mapActions 时，你需要确保它们作为函数被调用，并且返回的对象需要被解构赋值给组件中的响应式变量。
• 如果你的模块是命名空间化的，你需要正确地引用它们。
• 在 Vue 3 中，Vuex 的辅助函数需要配合 setup 函数使用，并且通常与 Composition API 一起使用。

这些辅助函数可以帮助你在 Vue 3 中更方便地使用 Vuex 来管理状态，同时也让代码更具可读性和可维护性。