Vue3 精通指南：如何在 setup 函数中巧妙利用 Vuex

诸葛妙计2023-12-30 22:09

在 Vue 3 中，如果你使用了组合式 API（Composition API），你可以通过 setup 函数来设置组件的响应式状态和逻辑。要在 setup 函数中访问 Vuex 的 $store，你可以使用 useStore 钩子，它是 Vuex 4 为 Vue 3 提供的一个新 API。

首先，确保你已经安装并设置了 Vuex。然后，你可以按照以下步骤在 setup 函数中访问 $store：

1、在你的 Vue 组件中导入 useStore 钩子。

2、在 setup 函数中调用 useStore 来获取 Vuex 的 store 实例。

3、使用 store 实例来访问状态、提交 mutations 或者分发 actions。

下面是一个简单的示例：

// store.js
import { createStore } from 'vuex';

// 创建一个新的 store 实例
const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

export default store;