【Vue】如何在 Vue 3 中使用组合式 API 与 Vuex 进行状态管理的详细教程

如何在 Vue 3 中使用组合式 API 与 Vuex 进行状态管理的详细教程。

安装 Vuex

首先，在你的 Vue 3 项目中安装 Vuex。可以使用 npm 或 yarn：

npm install vuex@next --save
# or
yarn add vuex@next

创建 Store

在 Vue 3 中，你可以使用 createStore 函数来创建 Vuex Store。通常我们会在项目的 src 目录下创建一个 store 文件夹，并在其中创建一个 index.js 文件：

// src/store/index.js

import { createStore } from 'vuex';

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

export default store;

在 Vue 应用中使用 Store

在你的 Vue 应用中，你需要将创建的 Store 实例传递给 Vue 应用。通常在 main.js 文件中进行：

// src/main.js

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

const app = createApp(App);

app.use(store);

app.mount('#app');

使用 State

你可以在组合式 API 中通过 useStore 函数来访问 Vuex Store：

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

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

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

    const count = computed(() => store.state.count);

    return {
      count
    };
  }
};
</script>

使用 Getters

同样，你可以在组合式 API 中使用 useStore 函数来访问 Vuex Getters：

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

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

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

    const doubleCount = computed(() => store.getters.doubleCount);

    return {
      doubleCount
    };
  }
};
</script>

提交 Mutations

你可以在组合式 API 中通过 useStore 函数来提交 Vuex Mutations：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

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

    const count = computed(() => store.state.count);

    const increment = () => {
      store.commit('increment');
    };

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

分发 Actions

你可以在组合式 API 中通过 useStore 函数来分发 Vuex Actions：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

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

    const count = computed(() => store.state.count);

    const increment = () => {
      store.dispatch('increment');
    };

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

模块化 Store

当应用变得非常复杂时，可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action 和 getter，甚至可以嵌套子模块：

// src/store/index.js

import { createStore } from 'vuex';

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

const store = createStore({
  modules: {
    a: moduleA
  }
});

export default store;

访问模块中的 State

在组合式 API 中，你可以通过模块名来访问模块中的 state 和其他属性：

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

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

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

    const count = computed(() => store.state.a.count);

    return {
      count
    };
  }
};
</script>