继续创造，加快成长！这是我参加「日新方案 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 东西检测到

关于 Vue 项目中是否运用 store 的一些考虑？

这是两种方法在运用体验上面的差异

store 终究带来了什么？

在 Pinia 官网 中有这么一段话

关于 Vue 项目中是否运用 store 的一些考虑？

在很多时候，其实是体验不到 pinia 带来的优点，所以能够完全运用 组合式 api 作为大局状况办理的东西