Pinia – 新一代数据共享插件使用说明

简介

Pinia 是Vue3中替代Vuex的新一代数据共享插件，本文为Pinia的基本使用教程。

与VueX的区别

采用组合式API

所谓组合式API,指的是我们所有需要调的函数或数据，都不会直接保存到Vue对象中，如Vue2中的使用的是属性API,无论是VueX还是Vue-Router，在使用Vue.use()方法加载插件后，其插件都会被直接植入Vue2对象中。

而Vue3采用的组合式API则与Vue2不同，Vue3中采用的组合式API会使所有的插件加载后都不会植入Vue3对象中，而是使用分别引入的方式，需要用到插件中的什么功能，就引入对应的函数即可。

而Pinia同时支持Vue2和Vue3,但它比较出色的是它也使用组合式API进行数据管理。

去除Mutations

VueX中包含 State、Actions、Mutations、Getters四大存储属性，其中的Mutations是作为唯的数据修改入口，VueX设置Mutations的初衷只是为了避免用户使用VueX处理数据相对复杂的场境下，可能代码会比较多，希望通过多级Actions方法来步骤化处理数据（即Actions中的方法调用其它Actions方法），而Mutations则只负责最终数据的操作，不能步骤化处理，但在实际使用过程中发现Mutations比较鸡肋，因此在Pinia中直接去除了Mutations的功能。

去除模块化

在VueX中，VueX作为一个大仓库，如果数据量变多时，需要对每一批数据进行模块化，VueX提供modules模块化功能，相当于在VueX的大仓库中存储多个“小仓库”，提供namespace命名空间实现模块另名，在Pinia中去除了modules模块功能，Pinia本身没有“大仓库”的概念，而是所有创建出来的仓库，都是已模块化的“小仓库”。

安装Pinia

安装Pinia 可以通过下面方式进行安装

npm install pinia
pnpm install pinia

使用Pinia

引入Pinia

要引入Pinia,我们只需要引入Pinia的插件启动函数，并执行即可

// 引入pinia的插件创建函数API
import {createPinia} from "pinia";
// 调用创建函数，则其结果则为pinia插件
let pinia = createPinia();
// Vue3 中引入pinia插件即可
app.use(pinia)

致此，Pinia插件就正式引入到Vue3中

创建仓库

上文我们说过，Pinia没有VueX那样的“大仓库”的概念，所以Pinia插件本身是不能直接存储数据的，而是通过创建每个“小仓库”来区别模块数据，创建多少个，就有多少个“小仓库”，使用创建函数 defineStore

// 定义用户相关的小仓库
import {defineStore} from 'pinia'
let useUserStore = defineStore("模块名", {
    state: () => {
        return {
            state数据
        }
    },
    actions: {
        Actions 方法
    },
    getters: {
        Getters 方法
    }
});
export default useUserStore;

致此，我们就为某一个“模块”创建了一个仓库。

其中defineStore 所创建的结果，即是这个仓库的变量，我们需要把它返回出去，以便后面我们需要用到时进行引入调用。

使用仓库中的数据

上一章我们创建了仓库后，并在仓库的state中存入数据，这时当我们在某一个Vue组件中需要使用到这个仓库中的数据时，就可以直接引入创建仓库时导出的变量了

// 引入创建的“小仓库”
import useUserStore from "@/store/modules/User";

// 执行小仓库
const store = useUserStore();

// 读取state数据方法一：解构
const { name, age } = store;

// 读取state数据方法一：点语法
const sex = ref<string>( store.sex );

修改state数据（单项）

从上一章我们可以知道如何读取state中的数据，但当我们需要对state中的数据进行修改的时候，Pinia支持直接修改，不需要像Vuex中需要提交Actions来交给Mutations进行修改数据。

可以通过以下方法直接修改state数据

let store = useUserStore();
store.name = "张三"

但是这样的数据修改，并不能引起Vue的响应式显示，Pinia提供了一种可以让数据变成响应式数据的方式函数

storeToRefs

代码如下

// 引入转为响应式数据的函数
import {storeToRefs} from "pinia";
// 使用store仓库
let useStore = useUserStore();
// 使用storeToRefs函数使得所有state数据都成为响应式数据
let {name,age,sex} = storeToRefs(useStore);

// 这时直接修改数，页面会有响应式功能
name = "张三"

批量修改state数据（多项）

在实际项目中，我们不会只修改state中的单个数据，有可能需要对多个数据同时修改，这时可以使用Pinia提供的$patch方法，对state中的多个数据进行修改。

useStore.$patch({
  name:"李四",
  age:110
})

若state中有多个数据，但在$patch中不希望修改时，可以不加入进去，不涉及 $patch 的数据，将不会进行修改，也不会被删掉。

重置修改过的state数据

有时候我们经过修改state数据后，希望把修改的数据恢复到修改前的数据，Pinia提供了 $reset 方法，可以对state数据回滚到上一个数据。

store.$reset();

替换state数据（$state）

上一章中的 $patch 可以批量修改数据，不修改的数据会保留不改变，但使用 $state 方法修改的数据，将会把当前的仓库中的state数据进行替换。

store.$state = { counter: 666, name: '张三' }

Getters 属性

getters是defineStore参数配置项里面的另一个属性，前面我们讲了state属性。getter属性值是一个对象，该对象里面是各种各样的方法。大家可以把getter想象成Vue中的计算属性，它的作用就是返回一个新的结果，既然它和Vue中的计算属性类似，那么它肯定也是会被缓存的，就和computed一样。

getters 方法定义

getters 的方法定义与 computed 差不多，getters 的方法中会被传递一个 state 参数，在getters中定义的方法可以通过 store.xxx 直接访问。

getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
  },

在组件中可以直接使用  {{ store.getAddAge }} 方式直接访问。

getters中调用其它getters中的方法

Pinia 中支持 getters 调用其它 getters 中的方法，但是按照TS/JS的编程规范，需要使用 function() 方式定义方法，才能获取到 store 仓库本身（即要获取 this 来取得 getters 的函数）

getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
    // 使用 function() 方式定义，而非使用 箭头函数
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },

getters 传参计算

getters 中的方法还支持传参计算，我们知道，使用  {{ store.getters }}  可以直接获取 getters 中返回的结果，也就是说，Pinia 帮我们隐式的调用了 getters() 的方法，但如果我们的 getters 定义的方法中，返回的是一个函数，如下：

getters: {
    getAddAge: (state) => {
      return (num: number) => state.age + num;
    },
  },

这时，我们使用  {{ store.getters }}  返回的将是一个函数，所以我们可以通过调用  {{ store.getters( 参数 ) }} 的方式，把我们想要传递的参数传到getters方法中，并调用

在Pinia内部相当于执行了 store.getters(state)(参数)

Actions 属性

actions 属性是用于定义逻辑函数的地方，它支持异步函数处理，定义actions方法非常简单，使用 functions( )方法定义即可。

定义 actions 方法

actions: {
    login:(data) {
      // 执行逻辑运算
      return xx;  // 可以返回异步函数 Promise
    },
  },

调用 actions 方法

可以直接使用 store.xxxx() 方法调用

let store = useUserStore();
store.login(data)

Pinia 持久化插件

Pinia 本身是一个基于内存存储的插件，当我们的页面发生刷新时，之前的数据将会被清除，为了解决当页面刷新时依然保留特定的数据，我们可以把数据存储在 LocalStorage 中，Pinia 有插件可以自动为我们把数据存取到 LocalStorage 中。

pinia-plugin-persistedstate

1.安装插件：

npm i pinia-plugin-persistedstate

2.在创建好 Pinia 后，引入 pinia-plugin-persistedstate 并使用 use 应用插件

const app = createApp(App)
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

3.在需要使用持久化操作的 Pinia 仓库中，开启插件即可。

export const useUserStore = defineStore("user", () => {
    const token = ref("");
    return {token}
}, {
    persist: true
})

对于小程序而言，小程序没有 LocalStorage 的慨念，但是提供了 Storage 的概念，pinia-plugin-persistedstate 不能直接自动识别使用，所以小程序可以在Pinia仓库开启自动存取操作时，可以通过自定义声明读写规则：

  {
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
      },
    },
  },