TypeScript实战之Pinia(Vuex和Pinia对比总结)

苏苏同学
1,532 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

简介

前面笔者在vuex4中应用了TypeScript，总体来说还行，但是仍然有配置麻烦，不支持getters、mutations、actions等痛点。今天我们再来实战下官方推荐的新的vue状态管理工具pinia。

pinia 由 vue 团队中成员所开发的，因此也被认为是下一代的 vuex，即 vuex5.x，在 vue3 的项目中使用也是备受推崇。所以 pinia 的学习迫在眉睫。

下面我们正式开始pinia的学习吧。

安装

yarn add pinia

// or 

npm install pinia

创建pinia并传递给vue实例

创建一个 pinia 并传递给 vue 应用。

在这一步我们可以发现，我们只需要简单创建一个pinia对象传给vue实例就可以自动收集我们后续创建的新store。并不需要像vuex一样把各个模块聚集在根store里面传递给vue实例。总体来说使用更加简单。

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './app.vue'

createApp(App).use(createPinia()).mount('#app')

创建store

与vuex不同，pinia没有了根store和modules的概念。在pinia中一个store一个文件，一个store里面包含state、getters、actions三部分。总体来说更简单更清晰。

需要使用defineStore来创建store。

注意第一个参数一定要唯一。

import { defineStore } from "pinia";

export const mainStore = defineStore("main", {
  state: () => {
    return {
      name: "randy man",
      age: 24,
    };
  },
  getters: {
    getterName(state) {
      return state.name.toUpperCase() + "-----" + state.age;
    },
    // 这种方式也可以，不过需要自己手动指定返回值类型
    getterAge(): number {
      return this.age;
    },
  },
  actions: {
    // 直接使用this修改state
    changeName(payload: string) {
      this.name = payload;
      return "success";
    },

    // 异步action
    async fetchData(payload: number) {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${payload}`
      );
      const res = response.json();

      // 调用其他action
      // this.changeName("xxx");

      return res;
    },
  },
});

下面我们详细介绍下第二个参数。这个参数里面包含state，getters，action三个属性。

state

state就是状态，和vuex一样，就不过多介绍了。只需要注意他是一个方法，返回一个state对象。

state: () => {
  return {
    name: "randy man",
    age: 24,
  };
},

getters

getters是计算属性，和vuex中是一样的。但是需要知道它支持两种写法。

通过this修改state的方式需要自己手动指定返回值类型。

getters: {
  getterName(state) {
    return state.name.toUpperCase() + "-----" + state.age;
  },
  // 这种方式也可以，不过需要自己手动指定返回值类型
  getterAge(): number {
    return this.age;
  },
},

actions

在pinia中没有了mutations，所以同步和异步操作都在action中进行。

并且在pinia中是支持直接调用别的action，或者别的模块的action。

actions: {
  // 直接使用this修改state
  changeName(payload: string) {
    this.name = payload;
    return "success";
  },

  // 异步action
  async fetchData(payload: number) {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${payload}`
    );
    const res = response.json();

    // 调用其他action
    // this.changeName("xxx");

    return res;
  },
},

在 action 里调用其他 store 里的 action 也比较简单，引入对应的 store 后即可访问其内部的方法了，跟在vue组件中使用是一样的。

// user.ts
import { useAppStore } from './app'

export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      const appStore = useAppStore()
      appStore.setData(data) // 调用 app store 里的 action 方法
      return data
    }
  }
})

在vue组件使用

在vue组件中使用也很简单，需要使用哪个store引入哪个store就可以啦。

<template>
  <div>
    <div>name: {{ name }}</div>
    <div>getterName: {{ getterName }}</div>
    <div>
      <button @click="updateMainName">修改main name</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { mainStore } from "@/pinia/main";
import { storeToRefs } from "pinia";

export default defineComponent({
  name: "PiniaView",
  setup() {
    const store = mainStore();

    const updateMainName = async () => {
      // 直接修改 不建议
      // store.name = "demi woman";

      // 对象形式修改
      // store.$patch({ name: "demi woman" });

      // 函数形式修改
      // store.$patch((state) => {
      //   state.name = "demi woman";
      // });

      // 通过action修改
      const result = store.changeName("demi woman");
      console.log(result);

      // 返回的值不会被Promise包裹
      const result2 = await store.fetchData(1);
      console.log(result2);
    };

    // 直接解构不能响应式
    // const { name, getterName } = store;

    // 这样响应式
    const name = computed(() => store.name);
    const getterName = computed(() => store.getterName);

    // 这样也能响应式
    // const { name, getterName } = storeToRefs(store);
    
    // 或者直接传递store过去使用也是能响应式的
    // store

    return {
      name,
      getterName,
      updateMainName,
    };
  },
});
</script>

跟vuex相比，使用pinia不需要定义state类型，不用定义key就能得到TypeScript的优势。

image.png

可以看到我们使用store的时候，它的所有属性和方法state、getters、actions等都会自动提示出来，并且当我们使用了不存在的属性在编码期间会直接报错。

image.png

获取state

获取state的方式有三种，但是需要注意通过直接解构的方式数据是不会响应式的。如果需要响应式需要使用computed或storeToRefs

import { storeToRefs } from "pinia";

const store = mainStore();

// 直接解构不能响应式
// const { name } = store;

// 这样响应式
const name = computed(() => store.name);

// 这样也能响应式
// const { name } = storeToRefs(store);

获取getters

获取getters的方式也有三种，但是需要注意通过直接解构的方式数据是不会响应式的。如果需要响应式需要使用computed或storeToRefs

import { storeToRefs } from "pinia";

const store = mainStore();

// 直接解构不能响应式
// const { getterName } = store;

// 这样响应式
const getterName = computed(() => store.getterName);

// 这样也能响应式
// const { getterName } = storeToRefs(store);

修改state

修改state的方式也有很多种，可以直接修改、还可以使用$patch来传递对象或方法来修改、还可以通过action修改。

const updateMainName = async () => {
  // 直接修改 不建议
  // store.name = "demi woman";

  // 对象形式修改
  // store.$patch({ name: "demi woman" });

  // 函数形式修改
  // store.$patch((state) => {
  //   state.name = "demi woman";
  // });

  // 通过action修改
  const result = store.changeName("demi woman");
  // action 返回啥就是啥 result等于'success'
};

虽然修改方式很多，但是还是在实际开发中推荐使用action来修改state。

使用action的时候还有一点需要注意。我们知道在vuex中，action如果有返回值是会被Promise包裹resolve出来，也就是会返回一个Promise对象。但是在pinia中，action返回啥就是啥不会被Promise包裹resolve出来。

监听

在pinia中我们可以通过xxxstore.$subscribe((mutation, state) => {})来监听state的变化。 通过xxxstore.$onAction(({ after, onError, name, store, args }) => {})来监听action和它们的结果的变化。

$subscribe

默认组件销毁监听器消失，加上 { detached: true } 参数后 监听器不消失。

// 监听state的变化
// 默认组件销毁监听器消失，加上 { detached: true } 参数后 监听器不消失
userStore.$subscribe(
  (mutation, state) => {
    console.log("mutation", mutation);
    console.log("state", state);
  },
  { detached: true }
);

$onAction

添加第二个参数 true，此订阅器即便在组件卸载之后仍会被保留。

// 添加第二个参数true 此订阅器即便在组件卸载之后仍会被保留
// 监听action的变化
userStore.$onAction(({ after, onError, name, store, args }) => {
  console.log(` Start "${name}" with params [${args.join(", ")}].`, store);
  // 这将在 action 成功并完全运行后触发。
  // 它等待着任何返回的 promise
  after((result) => {
    console.log(`after Finished ${result}`);
  });
  // 如果 action 抛出或返回一个拒绝的 promise，这将触发
  onError((error) => {
    console.warn(`onError Failed  ${error}.`);
  });
}, true);

数据持久化

我们知道，vuex和pinia本质上都是对象，都是临时存储，当页面刷新数据都会丢失。

想要刷新不丢失就需要我们手动存储在localStorage或sessionStorage里面。如果不想手动处理，我们也可以使用插件。

vuex使用vuex-persistedstate

pinia使用pinia-plugin-persistedstate

具体怎么使用笔者就不再赘述了大家可以自行查看文档，原理都是一样的，通过配置将指定数据存储到localStorage或sessionStorage里面实现数据持久化。

总结

  1. pinia有完整的 typescript 的支持。不再像使用vuex需要定义key、定义state类型那么麻烦。

  2. 足够轻量，压缩后的体积只有1.6kb。

  3. 去除 mutations，只有 state，getters，actions。跟react-redux类似，同步异步都在action里面进行。根简单清晰。

  4. 没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割。更简单易懂。

  5. 无需手动添加 store，store 一旦创建便会自动添加，我们只需要在vue组件直接引用需要的store使用即可。

系列文章

TypeScript学习之环境搭建

TypeScript学习之数据类型

TypeScript学习之函数

TypeScript学习之接口

TypeScript学习之类

TypeScript学习之类型推断、类型断言、双重断言、非空断言、确定赋值断言、类型守卫、类型别名

TypeScript学习之泛型

TypeScript学习之装饰器

TypeScript学习之模块与命名空间

TypeScript学习之申明文件

TypeScript学习之常用内置工具类型

TypeScript学习之配置文件

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！

avatar
文章
阅读
粉丝