Vue项目中是否使用store原理深究
前言
关于 Vue 项目中是否使用 store 的一些思考？
为什么会有这个问题呢？
最近做项目的时候，使用 pinia 作为状态管理库，翻看 pinia 文档的时候，发现 pinia 创建 store 多了一种 setup store 的方式
setup store
const useStore = defineStore('store', () => {
const status = ref(false);
const setStatus = () => {
status.value = !status.value;
};
const number = computed(() => Number(status.value));
return {
status,
setStatus,
number,
};
});
setup store 与 vue 的 响应式 api 结合在一起使用，相较于原先的 选项式 api 统一了语法，更符合开发者习惯
使用 store：
const store = useStore() console.log(store.status); // false console.log(store.number); // 0 store.setStatus(); console.log(store.status); // true console.log(store.number); // 1
这样的写法很棒！
但是我们为什么要多次一举使用 store，为何不在其他文件直接使用 组合式 api 定义数据和修改数据的方法，非要包裹一层创建 store 的过程
const status = ref(false);
const setStatus = () => {
status.value = !status.value;
};
export { status, setStatus };
在其他的组件中直接将 status 和 setStatus 引入，这样写法比 setup store 还要简单
那使用 store 的意义是什么呢 ？
两种方式的区别
为什么要引入 store，大多数情况都是为了 全局状态管理，方便了 跨组件通信，但是直接使用 组合式 api 也能完成这个任务。
这两种方式有什么区别呢？
如果引入其他文件中定义的 简单数据类型 是 不允许修改 的
// 第一个文件
export let num = 0;
// 第二个文件
import { num } from '.';
num++; // error
import 为当前模块引入的变量都会被视作为 常量
setup store 相比 组合式 api 拥有更强大的地方：
const useStore = defineStore('store', () => {
const num1 = ref(0);
const num2 = 0; // 非响应式
return {
num1,
num2,
};
});
const store = useStore();
store.num1++;
store.num2++; // 响应式
console.log(store.num1); // 1
console.log(store.num2); // 1
基本数据类型和响应式数据都可以更改，基本数据可以修改，也可以引起视图的变化，在 store 外部调用是响应式的，但在 store 内部不是响应式的，但是不会被 pinia Devtools 工具检测到
这是两种方式在使用体验上面的区别
store 究竟带来了什么？
在 Pinia 官网 中有这么一段话
在很多时候，其实是体验不到 pinia 带来的好处，所以可以完全使用 组合式 api 作为全局状态管理的工具
以上就是Vue项目中是否使用store原理深究的详细内容，更多关于Vue项目store使用原理的资料请关注脚本之家其它相关文章！
相关文章
vue-router2.0 组件之间传参及获取动态参数的方法
下面小编就为大家带来一篇vue-router2.0 组件之间传参及获取动态参数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue之el-form表单校验以及常用正则，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了vue2 对全局自定义指令一次性进行注册,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Vue+Element实现动态生成新表单并添加验证功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Element MessageBox弹框的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了laravel5.3 vue 实现收藏夹功能，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要为大家详细介绍了vue如何使用websocket实现实时数据推送,发布订阅重连单点登录功能,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要介绍了Vue中如何实现字符串换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论