Vuex@4
Pinia
RFC
Vuex5
-1 参考资料

本文打算谈论以下内容：

vuex@4
pinia 用法浅析
谈vuex5
rfc概念和流程
Vuex@4

vuex@4 是 vue3 官方的数据管理插件。通过 vuex 我们可以把数据存入 store 中，后续如果要修改有 mutation 和 action 两种方式操作。

以上是事实。虽然会感到冗余，但是操作会得到风格的统一，并且可以在 devtool 中得到相关提示。

// store/index.ts
import { createStore } from "vuex";
const state = () => ({
  count: 0
});
const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    inc(state) {
      state.count++;
    }
  }
});
export default store;
// app.vue
const add = () => {
  store.commit("inc");
};

以上就是 vuex@4 的现状了。

需要注意的是：说到底 vuex 只是一个 vue 官方维护的插件，现在有另一个 store 的选择，这就是 pinia 。

Pinia

github https://github.com/posva/pinia 通过版本区分可以支持 vue2/vue3

It was started by Vue core team member Eduardo San Martin Morote with the first commit to the repo being made on Nov 18, 2019. Pinia 是 vue的核心团队成员制作的

基本使用自己翻文档。使用方式大致如下：

// store.js
import { defineStore } from "pinia";
export const useCounterStore = defineStore({
  id: "counter",
  state: () => ({
    count: 0
  }),
  actions: {
    inc() {
      this.$state.count++; // 利用this完美解决传参没类型的问题
    }
  }
});
// app.vue
import { computed, ref } from "vue";
import { useCounterStore } from "@/store/index";
const store2 = useCounterStore();
const counter = computed(() => store2.count); // 下面三种方式都可以改变这个值
// 三种修改方式都可以
const add = () => {
  store2.count += 1;
};
const add2 = () => {
  store2.$patch({
    count: store2.count + 1
  });
};
const add3 = () => {
  store2.inc();
};

三种修改值的方式都可以，看下图，都能被 devtool 捕捉到！通过 useStore() 获得当前 store ，更是从根本上移除了嵌套模块使用复杂的问题。随用随取，并且 ts 推导更容易。

使用感受就是舒服！相比之下 vuex 在 ts下还要随时控制类型，难用！

那 pinia 和 vuex4 不就展开竞争力嘛，而且 pinia 作者本身是 vue 里的人，那 pinia 未来会怎样？这就引入了 vuex5 和 RFC

补充：pinia目前已经贡献给了 vuejs 官方，目前的网址为：https://github.com/vuejs/pinia

同时在 create-vue 中，直接把 pinia 推荐为 store 的唯一推荐，相当于官宣扶正了。你可以通过 npm init vue@latest 来看到官网给的最佳实践，这可以作为推广使用 pinia 的核心论点。

RFC

所谓RFC 是request for comments，看起来是一个流程，你对vue有改进想法，比如新功能，就可以往这个仓库里提PR进行讨论，如果感觉还可以，会进入active，集中讨论，如果顺利就会进入试试阶段。之前讨论 ref: 语法糖时候，rfc就被众人熟知。再往前大概就是 functional api 了。

既然有这个流程，翻开 https://github.com/vuejs/rfcs 看到 active 文件夹，和PR就能看到很多东西。这就是未来啊！

翻开pr，就能看到这个 https://github.com/vuejs/rfcs/pull/271 ，里面说有个提案，就可以进入 https://github.com/kiaking/rfcs/blob/vuex-5/active-rfcs/0000-vuex-5.md

这就是 Vuex5 的内容了，继续看下面