如果您不打算开发大型单页应用,使用 Vuex可能是繁琐冗余的。那么我们什么时候该用到Vuex呢?
- 当项目中有多个共享的状态,便于维护(非父子通信)
- 缓存部分异步数据,减少后端服务的请求,提高用户体验
本文主要围绕Vue3的setup语法糖写法展开,有点可惜的是Vue3中使用Vuex已经不支持mapState,mapActions等辅助函数了,所以Vue3中更加推荐Pinia。
<script setup>
import {useStore} from "vuex";
const store = useStore();
// 调用mutation
store.commit("functionName", "payload");
// 如果有命名空间,则需要通过 命名空间/mutations的方法名
store.commit("spaceName/functionName", "payload");
// 调用action
store.dispatch("functionName", "payload");
// 如果有命名空间,则需要通过 命名空间/actions的方法名
store.dispatch("spaceName/functionName", "payload");
</script>