Vue全家桶 Pinia状态管理

Pinia

Pinia开始于大概2019年最初是作为一个实验为Vue重新设计状态管理让它用起来像组合式API从那时到现在最初的设计原则依然是相同的并且目前同时兼容Vue2、Vue3也并不要求你使用Composition API

所以说Pinia本质上依然是一个状态管理的库用于跨组件、页面进行状态共享这点和Vuex、Redux一样

Pinia 的成功可以归功于他管理存储数据的独特功能例如可扩展性、存储模块组织、状态变化分组、多存储创建

1. Pinia和Vuex的对比

Pinia 最初是为了探索Vuex 的下一次迭代会是什么样子结合了Vuex 5 核心团队讨论中的许多想法最终团队意识到Pinia已经实现了Vuex5中大部分内容所以最终决定用Pinia来替代Vuex

与Vuex 相比Pinia 提供了一个更简单的API具有更少的仪式最重要的是在与TypeScript 一起使用时具有可靠的类型推断支持

2. 引入 Pinia

首先我们需要安装 pinia 依赖

$ npm install pinia

然后创建一个pinia并且将其传递给应用程序

import { createPinia } from "pinia"

const pinia = createPinia()

export default pinia

最后使用 app.usepinia进行注册使用

import { createApp } from 'vue'
import App from './App.vue'

import pinia from "./store"
createApp(App).use(pinia).mount('#app')

3. Store 简介与使用

一个 store 是一个实体它会持有为绑定到你组件树的状态和业务逻辑也就是保存了全局的状态,你可以在你的应用程序中定义任意数量的Store来管理你的状态

Store有三个核心概念state、getters、actions等同于组件的data、computed、methods

一旦store 被实例化你就可以直接在store 上访问state、getters 和actions 中定义的任何属性

定义一个Store

我们需要知道Store 是使用defineStore() 定义的并且它需要一个唯一名称作为第一个参数传递这个name也称为id是必要的Pinia 使用它来将store 连接到devtools

defineStore() 的第二个参数可接受两类值Setup 函数或 Option 对象

import { defineStore } from "pinia";

export const useUser = defineStore("user", {
  state() {
    return {
      name: 'ximingx'
    }
  }
})

使用定义的Store

需要注意的是但在 setup() 调用 useStore() 之前store 实例是不会被创建的

<script setup>
import { useUser } from '../store/user/index'
const userStore = useUser()
console.log(userStore.name); // ximingx
</script>

注意Store获取到后不能被解构那么会失去响应式为了从Store 中提取属性同时保持其响应式您需要使用storeToRefs()

import { storeToRefs } from 'pinia';
import { useUser } from '../store/user/index'
const userStore = useUser()
const {name: name} = storeToRefs(userStore)
name.value = 'qsx'
console.log(name.value);

高级用法你甚至可以使用一个函数(与组件 setup() 类似)来定义一个 Store

在 Setup Store 中

• ref() 就是 state 属性

• computed() 就是 getters

• function() 就是 actions

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

4. Pinia核心概念State

state 是store 的核心部分因为store是用来帮助我们管理状态的在Pinia 中状态被定义为返回初始状态的函数

import { defineStore } from "pinia";

export const useUser = defineStore("user", {
  state() {
    return {
      isLogin: false,
      userInfo: {
        nickName: '',
        phone: '',
        email: '',
        lastLoginTime: '',
      }
    }
  }
})

默认情况下您可以通过store 实例访问状态来直接读取和写入状态

5. Pinia核心概念Getters

Getters相当于Store的计算属性getters中可以定义接受一个state作为参数的函数

import { defineStore } from "pinia";

export const useUser = defineStore("user", {
  state() {
    return {
      isLogin: false,
      userInfo: {
        nickName: '',
        phone: '',
        email: '',
        lastLoginTime: '',
      }
    }
  },
  getters: {
    getUserName: (state) => `用户名 ${state.userInfo.nickName}`
  }
})

调用我们定义的

import {useUser} from '../store/user/index'
const userStore = useUser()
console.log(userStore.getUserName);

Getters中访问自己的其他Getters我们可以通过this来访问到当前store实例的所有其他属性

6. Pinia核心概念Actions

可以使用defineStore() 中的actions 属性定义并且它们非常适合定义业务逻辑和getters一样在action中可以通过this访问整个store实例的所有操作

并且Actions中是支持异步操作的并且我们可以编写异步函数在函数中使用await

import { defineStore } from "pinia";

export const useUser = defineStore("user", {
  state() {
    return {
      isLogin: false,
      userInfo: {
        nickName: '',
        phone: '',
        email: '',
        lastLoginTime: '',
      }
    }
  },
  getters: {
    getUserName: (state) => `用户名 ${state.userInfo.nickName}`
  },
  action: {
    async getData() {
      
    }
  }
})

7. state 函数

调用 $patch 方法。它允许你用一个 state 的补丁对象在同一时间更改多个属性

    userInfo.$patch({
      age: 11,
      name: '𝒆𝒅.'
    })
    
     // userInfo.$patch((state) => {  
     // // 这里传入的state就是pinia的state
     // state.age = 11  
     // state.name = '𝒆𝒅.'
    })

$state 可以进行 state 的覆盖

	userInfo.$state = {
      name: '𝒆𝒅.',
      age: 11
    }

$reset() 方法将 state 重置为初始值

$reset 可以将 state 的数据初始到初始值

$subscribe 使用来监听的监听 state 数据的变化只要 state 里面的数据发生了变化就会自动走这个函数

$onAction一调用 actions 就触发

8. Pinia持久化存储

实现持久化存储需要配合以下插件使用

$ yarn add  pinia-plugin-persist

配置store文件夹下的index.js文件引入pinia-plugin-presist插件

import {createPinia} from "pinia"
import piniaPluginPresist from "pinia-plugin-presist"
const store = createPinia();
store.use(piniaPluginPresist)
export default store

配置stroe文件夹下的test.js文件使用presist属性进行配置

import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
    state:() => {
         tname:"test",
         tnum:0,
    },
    getters:{
       changeTnum(){
           console.log("getters")
           this.tnum++;
       }
    },
    actions:{
       addNum(val){
          this.tnum += val
       }
    },
    //持久化存储配置
    presist:{
    	 // enable:true开启持久化存储默认为使用sessionStorage存储
         enable:true,
         strategies:[
            {
            // key不设置key时storage的key为definePinia的第一个属性设置key值则自定义storage的属性名
            key:"testId",
            // storage:localStorage设置缓存模式为本地存储
            storage:localStorage,
            // paths不设置时对state中的所用数据进行持久化存执设置时只针对设置的属性进行持久化存储
            paths:['tnum']
            } 
         ]
    }
})