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移动端下拉刷新组件的使用教程，每一次我在使用vant组件库里面list组件和下拉刷新连在一起用的时候都会出现下拉刷新和列表下滑局部滚动的冲突，这就很难受，这篇文章将解决它2023-04-04
近期学习vue3的父子组件之间的传值,发现跟vue2的并没有太大的区别,这篇文章主要给大家介绍了关于Vue3子组件向父组件传值的两种实现方式,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
本文主要介绍了vue常用指令实现学生录入系统的实战，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
Vue.js实现"一个文件对应一个组件"，无需webpack等工具，按需加载组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。这篇文章主要给大家介绍了关于vue利用Moment插件格式化时间的相关资料,需要的朋友可以参考下2021-05-05
NProgress.js是轻量级的进度条组件，使用简便，可以很方便集成到单页面应用中。这篇文章主要介绍了在vue项目中使用Nprogress.js进度条的方法,需要的朋友可以参考下2018-01-01
前一段时间项目经历了前端上传文件的过程，首先进入页面会展示默认的样子，选中要上传的excel文件，本文通过实例图文相结合给大家介绍的非常详细，需要的朋友参考下吧2021-06-06
Vue 初始化时就会通过 Object.defineProperty 拦截属性的 getter 和 setter ，为对象的每个值创建一个 dep 并用 Dep.addSub() 来存储该属性值的 watcher 列表，这篇文章主要介绍了Vue 响应式系统依赖收集过程分析,需要的朋友可以参考下2022-06-06
这篇文章主要给大家介绍了关于通用vue组件化登录页面的相关资料,文中通过图文以及实例代码将解决的办法介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-08-08
下面小编就为大家分享一篇vue.js移动数组位置,同时更新视图的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论