不断写作,加速成长!这个是我参加「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 storevue响应式网站 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 };

在别的的部件中直接把 statussetStatus 引进,那样书写比 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 工具检测到

应用 pinia 做为全局状态管理方法的一种手段

这也是两种形式在使用感受上边的差别

store 到底增添了哪些?

在 Pinia 官方网站 含有那么一段话

应用 pinia 做为全局状态管理方法的一种手段

很多时候,其实就是感受不上 pinia 带来的收益,因此能够完全应用 组合型 api 做为全局状态管理方法的一种手段

adminjs.Cn 工作生活学习必备

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:应用 pinia 做为全局状态管理方法的一种手段