不断写作,加速成长!这个是我参加「AdminJS日新的目标 · 10 月更文考验」第14天,查看更多活动规则
序言
有关 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 做为全局状态管理方法的一种手段
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你