在组合 API 中导入 Vuex

在 Vue 应用程序的开发中，我们可能会使用 Vuex 来管理组件的状态。在使用组合 API 开发 Vue 组件时，我们如何导入和使用 Vuex 呢？

安装 Vuex

首先，我们需要安装 Vuex。在项目根目录下，输入以下命令：

npm install vuex

如果你使用的是 Yarn：

yarn add vuex

安装完成后，我们可以在代码中导入 Vuex。

导入 Vuex

我们可以通过以下方式导入 Vuex：

import { createStore } from 'vuex'

createStore 是 Vuex 的一个工厂函数，用于创建一个 Vuex 的 Store 对象。

创建 Vuex Store

在组合 API 中，我们可以使用 useStore 函数来访问 Vuex Store 对象。但是，在使用 useStore 之前，我们需要先创建一个 Vuex Store 对象。

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

在这个例子中，我们创建了一个简单的 Vuex Store，包含一个名为 count 的状态和一个名为 increment 的 mutation。

创建完成后，我们需要将其导出以便在其他组件中使用：

export default store

在组件中使用 Vuex

现在，我们已经成功地创建了一个 Vuex Store，可以在我们的组件中使用它了。

我们可以使用 useStore 函数来访问 Vuex Store 对象：

import { useStore } from 'vuex'

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

    function incrementCount() {
      store.commit('increment')
    }

    return {
      count: store.state.count,
      incrementCount
    }
  }
}

在这个例子中，我们使用 useStore 函数访问了 Vuex Store 对象，并在组件中定义了一个 incrementCount 函数，该函数在点击按钮时调用 increment mutation 来递增 count 状态。

结论

在组合 API 中使用 Vuex 非常简单。我们只需要导入 Vuex 并创建一个 Vuex Store 对象，就可以在我们的组件中使用它了。使用 useStore 函数来访问 Vuex Store 对象，并在你的组件中使用它即可。