Pinia状态管理工具笔记

Pinia

最新的状态管理工具

提供了更简单的API （去掉了 mutation）

提供符合组合式风格的API（和V3 新语法统一）

每一个store都是一个独立的模块

更好的配合TS

开始 - 基础语法

安装包

yarn add pinia
#
npm install pinia

main.js

import { createPinia } from 'pinia'

app.use(createPinia())

store/ user.js

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

// 定义store
// defineStore('仓库唯一标识'，函数)

// 导出此模块
export const userStore = defineStore('user',()=>{
  // 声明数据 
  const name = ref('小明')
  
  // 声明操作数据的方法 action
  const changeUser = () => {
      name = '小李'
  }
  
  // 声明基于数据生成的计算属性 getters
  const userName = computed(() => name)
  
  // 将数据或方法 return出去
  return {
  	name,
    changeUser,
    userName
  }
})

使用

<script setup>
// 导入
import { userStore } from '@/store/user.js'
const userState = userStore()
// 打印store里return出来的测试
console.log(userState.name)
console.log(userState.userName)
    
// 使用store里的方法 可以写个事件函数调用方法，也可以直接在标签上绑定点击事件
const but = () => {
  userState.changeUser()
}
</script>

<template>
  // 标签上绑定点击事件方式
  <div @click="userState.changeUser"> 点击调用方法 </div>
</template>

storeToRefs

如果在页面解构store里return出来的数据 会丢失响应式，用上这个就不会

<script setup>
// 导入
import { userStore } from '@/store/user.js'
// 将storeToRefs导入
import { storeToRefs } from 'pinia'  
const userState = userStore()
// 这样使用没问题
console.log(userState.name)
// 这样使用会丢失响应式
const { name } = userState
// storeToRefs()没问题
const { name } = storeToRefs(userState)

</script>

<template>
</template>

pinin持久化工具

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

1. 安装

npm i pinia-plugin-persistedstate

2. 将插件添加到 pinia 实例上

// main.js
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

3. 用法

创建 Store 时，将 persist 选项设置为 true。

import { defineStore } from 'pinia'
// 导出此模块
export const userStore = defineStore('user',()=>{
  // 将数据或方法 return出去
  return { }
},
{ 
  persist: true  // 这里设为true将使用默认持久化配置保存
})