在 `setup` 函数中使用 Vuex

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在Vue3中，结合Vuex 4（与Vue3配套的版本），可以在 setup 函数中通过 useStore 钩子来访问和操作Vuex store。

使用 useStore

import { useStore } from 'vuex';export default {
setup() {
const store = useStore();// 访问 state
const count = computed(() => store.state.count);// 提交 mutation
const increment = () => {
store.commit('increment');
};// 分发 action
const asyncIncrement = () => {
store.dispatch('asyncIncrement');
};return {
count,
increment,
asyncIncrement
};
}
};

示例

假设我们有一个Vuex store，包含一个 count state和一个 increment mutation：

// store.js
import { createStore } from 'vuex';export default createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
asyncIncrement({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
}
});

在组件中使用这个store：

<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<button @click="asyncIncrement">Async 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');
const asyncIncrement = () => store.dispatch('asyncIncrement');return {
count,
increment,
asyncIncrement
};
}
};
</script>

注意事项

• 确保在调用 useStore 之前已经安装并配置了Vuex。
• 使用 computed 来响应式地访问store中的state。
• 使用 mutations 来同步修改state，使用 actions 来处理异步逻辑。

使用模块化的 Vuex Store

如果你的store是模块化的，可以通过 store.state.moduleName 和 store.commit('moduleName/mutationName') 的方式来访问和修改模块中的state和mutations。

总结

在Vue3中，通过 useStore 钩子可以很方便地在 setup 函数中访问和操作Vuex store。这种方式使得组件能够更加简洁地与全局状态进行交互，同时保持了响应式数据的更新。