前端状态管理之Piana

状态管理：集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

当项目中有多个组件共享某些状态的时候，使用父子组件传值或是组件间传值会非常麻烦，并且数据不易维护。除了在项目中定义全局变量，还可以使用状态管理库来进行共享状态管理，使数据持久化。

Piana 和Vuex 都是 Vue 的状态管理库，可以跨组件或者页面共享状态。现在很多项目都是Vue3+Vite+Pinia 的配置，选择 Pinia ，因为它更加轻量、相比之下更容易理解和使用，比较灵活，同时支持 Vue2 和 Vue3

Vuex ：支持 state、getters、actions、mutations，而 Piana 不再使用 mutations。 Piana 在线 demo

安装及引入

安装：

less 复制代码

npm i vuex -S  // vuex
npm install pinia // piana

引入：在 main.js 文件中挂载 Pinia 实例

javascript 复制代码

import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')

定义 store

这里以登录之后存储接口返回的用户信息为例：

在 src 目录下新建 store/user/index.js 文件

目录结构：

store
- user
  - index.js

创建Store

Piana 支持使用两种语法创建 Store：

选项式API (Options API)
组合式API(Composition API)，贴近Vue3的语法，组合式的写法让代码更加扁平化

从 pinia 中引入 defineStore ，通过 defineStore 声明对应的数据和方法，共两个参数：

id，第一个参数是一个唯一的名称（唯一的标识），也就是为容器起一个名字
第二个参数：函数或对象
返回值：一个函数

第二个参数，包含三个属性：

state: 表示状态, state 是一个函数, 需要持共享的数据在函数的返回值中声明
getters: 计算属性
actions: 修改状态（state）的方法，修改数据时，需要通过调用函数传递参数来修改变量的值，不能直接对变量赋值。

比如存储用户名称，在 actions 中定义 setUserName() 方法来实现，使用对象类型的代码如下：

javascript 复制代码

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => {
    return {
      userName: "",
    }
  },
  getters:{},
  actions:{
      setUserName(val) { this.userName = val }
  }
})

使用函数类型的代码如下：

js 复制代码

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useNameStore = defineStore('user', () => {
  const userName = ref('');
  function setUserName(val) {
    userName.value = val;
  }
  return { 
    userName,
    setUserName
  }
});

使用数据

引入对应的 store 文件比如这里需要使用用户信息

import { useNameStore } from '../store/user/index'

定义 store

const store = useNameStore();

在 script 中使用 actions 中声明的 setUserName 函数：

js 复制代码

const doSomething =() { store.setUserName("admin"); }

在 template 中使用state 属性定义的变量 userName：{{store.userName}}

4.解构的数据

解构的数据，并不是响应式数据，数据变化时，这类数据不会随之更新，导入 Piana 的 storeToRefs方法，数据变成响应式。 const { a, b } = storeToRefs(store)

数据持久化

需要注意的是，pinia 与 vuex 都是将数据存在内存中，vuex 在刷新浏览器页面后会清理内存，会有数据丢失的问题，pinia 也会有同样的问题。

如何使数据持久化

浏览器缓存：cookie 、localStorage 、sessionStorage
插件（插件的原理也是将数据通过 localStorage 进行缓存）
- Pinia-persistedstate-plugin
- vuex-persistedstate