🤍 前端开发工程师、技术日更博主、已过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。这种方式使得组件能够更加简洁地与全局状态进行交互，同时保持了响应式数据的更新。