vue3 如何使用store

在 Vue 3 中，使用 Vuex 来管理应用程序的状态是很常见的做法。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。以下是如何在 Vue 3 应用程序中使用 Vuex 的基本步骤：

1. 安装 Vuex

如果你还没有安装 Vuex，可以通过 npm 或 yarn 来安装它：

npm install vuex@next
# 或者
yarn add vuex@next

2. 创建 Store

创建一个新的文件（例如 store.js）来定义你的 store。在这个文件中，你需要定义 state、getters、mutations 和 actions：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  getters: {
    doubleCount: (state) => state.count * 2
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementIfOdd({ state, commit }) {
      if (state.count % 2 !== 0) {
        commit('increment');
      }
    }
  }
});

export default store;

3. 配置 Vue 应用程序

在你的主 JavaScript 文件（例如 main.js 或 main.ts）中，导入 Vuex store 并将其添加到 Vue 应用程序实例中：

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

const app = createApp(App);

app.use(store);

app.mount('#app');

4. 在组件中使用 Store

在你的 Vue 组件中，你可以使用 mapState、mapGetters、mapActions 和 mapMutations 辅助函数来访问和修改 store 中的状态：

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    // 映射 this.count 到 store 中的 state.count
    ...mapState(['count'])
  },
  methods: {
    // 映射 this.incrementCount() 到 store 中的 increment  mutation
    ...mapActions(['increment']),
    // 或者使用对象语法
    incrementCount() {
      this.$store.commit('increment');
    }
  }
};

5. 在模板中显示状态

在你的 Vue 模板中，你可以使用计算属性或者绑定到方法来显示 store 中的状态：

<template>
  <div>
    <p>Count is: {{ count }}</p>
    <p>Double count is: {{ doubleCount }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

6. 处理异步操作

对于异步操作，你应该使用 actions 而不是 mutations。你可以在 actions 中发起异步请求，并在请求成功后调用 commit 方法来更新状态：

actions: {
  asyncIncrement({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  }
}

注意事项

• 尽量避免在组件中直接修改状态，而应该通过提交 mutations 来变更状态。
• 使用 mapState、mapGetters、mapActions 和 mapMutations 辅助函数可以使得组件代码更加清晰和易于维护。
• 在处理异步逻辑时，确保使用 commit 来同步地更新状态。

通过以上步骤，你可以在 Vue 3 应用程序中有效地使用 Vuex 来管理状态。这将有助于你构建一个可预测、可维护的大型应用程序。