1. 介绍

pinia状态管理器用于前端全局获取信息，与Vuex相比很类似，但更简易(除去了mutations)。通过资源管理器工具（yarn）输入命令yarn add pinia安装插件。

import { createPinia } from 'pinia'

const pinia = createPinia()

2. 参数

state用于存放数据的地方，通过箭头函数返回
getters定义计算关系的地方
actions定义方法的地方
persist设置数据持久化的属性

下面定义了一个名叫useCommon的状态管理器

import { defineStore } from "pinia"

export const useCommon = defineStore('useCommon', {
    // 数据
    state: () => {
        return {
            
        }
    },
    // 计算
    getters: {

    },
    // 方法
    actions: {
        
    },
    persist: {
        
    }
})

3. 持久化

pinia所管理的数据其实也相当于静态数据，它定义在前端代码中，在页面中某处展示时，如果用户修改获取到的state中的值并刷新页面，发现数据会变回到它最开始定义的状态。因此如果想将修改的值代替原来定义的值，并且刷页面也不会再回到定义的状态，就需要开启持久化操作，将数据保存到浏览器中。通过资源管理器工具（yarn）输入命令yarn add pinia-plugin-persistedstate安装插件。

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

persist属性配置

设置enabled属性为true开启持久化操作
设置storage属性为sessionStorage/localStorage将数据存储在浏览器的session或local中
设置key属性为state数据存储在浏览器Storage的key自定义命名

persist: {
    enabled: true,
    storage: sessionStorage,
    // storage: localStorage
    // key: 'local'
}

关于持久化时的两个问题

需修改state中的值，才能将state数据存入浏览器中
sessionStorage不支持跨标签页共享数据，localStorage支持跨标签页共享数据

4. 使用

这里我们继续以useCommon来命名一个状态管理器，并向state中添加一个time值

import { defineStore } from "pinia"

export const useCommon = defineStore('useCommon', {
  // 数据
  state: () => {
    return {
      time: '2023-4-26'
    }
  },
  // 计算
  getters: {

  },
  // 方法
  actions: {
    update(val) {
      this.time = val
    }
  },
  persist: {
    enabled: true,
    storage: sessionStorage
  }
})

现在我们开始使用useCommon状态管理器，并分享一些经验

<script lang="ts" setup>
import { computed, ref } from "vue";
import { useCommon } from "@/..";

// 通过computed实时获取state数据（只要state中发生变化，获取的数据state也会同步更新）
let getTime = computed(() => useCommon().time);
const time = ref(getTime);
//console.log(time.value); // 2023-4-26

// 修改state的值
// 因为上面使用computed获取值，因此我们可以直接修改,修改后的值在state中也会更新
// 直接修改适用于组合式（setup）编程
time = '2023-5-3'
//console.log(time.value); // 2023-5-3

// 如果没有使用computed获取值或者不想直接修改，可以在状态管理器的actions中定义一个方法(update())
// 间接直接修改适用于分布式编程
function useUpdate() {
   useCommon().update('2023-5-19');
}
//console.log(time.value); // 2023-5-19
</script>

Pinia🍍🍍🍍🍍🍍（状态管理器）

1. 介绍

2. 参数

3. 持久化

4. 使用