Vue.js 如何将 Vuex store 注入到 Vue 3 中

在本文中，我们将介绍如何在 Vue 3 中将 Vuex store 注入到应用程序中。Vuex 是 Vue.js 的官方状态管理库，用于管理应用程序中的状态。通过将 Vuex store 注入到 Vue 3 的根组件中，我们可以在整个应用程序中轻松地访问和修改状态。

阅读更多：Vue.js 教程

安装 Vuex

在开始之前，请确保已经安装了 Vue 3 和 Vuex。可以使用 npm 或 yarn 进行安装：

# 使用 npm 安装
npm install vuex@next

# 使用 yarn 安装
yarn add vuex@next

创建 Vuex store

首先，我们需要创建一个 Vuex store。在 Vue 3 中，我们可以使用 createStore 函数来创建一个新的 store。在 store 中，我们可以定义和管理应用程序的状态、操作和获取状态的方法。

import { createStore } from 'vuex';

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

export default store;

在上面的示例中，我们创建了一个包含 count 属性的初始状态。我们还定义了两个 mutations，用于增加和减少 count 的值。还有两个 actions，用于分发 mutations 中定义的操作。最后，我们使用 getCount getter 获取 count 的值。

创建根组件

在将 Vuex store 注入到 Vue 3 中之前，我们需要创建一个根组件。可以使用 createApp 函数来创建根组件：

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

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

在上面的示例中，我们通过 createApp 函数创建一个 app 实例，并将根组件 App 作为参数传递。然后，使用 use 方法将 Vuex store 注入到 app 实例中。最后，通过 mount 方法将 app 挂载到 HTML 页面中的 #app 元素上。

在组件中使用 Vuex store

现在，我们已经将 Vuex store 注入到根组件中，可以在组件中使用 store 的状态、操作和获取器。

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

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

export default {
  name: 'App',
  computed: {
    count() {
      const store = useStore();
      return store.getters.getCount;
    },
  },
  methods: {
    increment() {
      const store = useStore();
      store.dispatch('increment');
    },
    decrement() {
      const store = useStore();
      store.dispatch('decrement');
    },
  },
};
</script>

在上面的示例中，我们使用 useStore 方法从 store 中获取实例，然后使用该实例访问状态、操作和获取器。在计算属性中，我们使用 getters.getCount 获取 count 的值。在方法中，我们使用 store.dispatch 分发 increment 和 decrement 操作。

总结

在本文中，我们介绍了如何在 Vue 3 中将 Vuex store 注入到应用程序中。首先，我们安装了 Vuex，并使用 createStore 函数创建了一个新的 store。然后，我们使用 createApp 函数创建了根组件，并将 Vuex store 注入到根组件中。最后，我们在组件中使用 useStore 方法访问 store 的状态、操作和获取器。

通过将 Vuex store 注入到 Vue 3 中，我们可以更方便地管理和共享应用程序的状态，提高开发效率和代码可维护性。希望本文对你在 Vue 3 中使用 Vuex store 有所帮助！