vue3基础教程之pinia配置和用法

npm install pinia

import { createPinia } from "pinia";
// 导出modules下面的所有仓库
import { userStore } from "./modules/user"
...
...

const pinia = createPinia()

// 组合api添加$reset方法，用于重置状态
pinia.use(({ store }) => {
  const initialState = JSON.parse(JSON.stringify(store.$state))
  store.$reset = () => {
    store.$patch(initialState)
  }
})

export default pinia

export { userStore }

// 创建用户信息仓库
import { defineStore } from 'pinia'
export const userStore = defineStore('user', () => {
  let name = ref('张三')
  let age = ref(18)
  let obj = reactive({
    username: '韩梅梅',
    address: '北京'
  })

  const changeName = (val) => {
    name.value = val
  }

  return {
    name,
    age,
    obj,
    changeName
  }
})

...
import pinia from '@/store'
app.use(pinia)
...

app.mount('#app')

<template>
  <div>
    <div>{{ user.name }}</div>
    <el-button type="primary" @click="changeName1">修改姓名</el-button>
    <div>{{ age }}</div>
    <el-button type="primary" @click="changeName2">修改年龄</el-button>
  </div>
</template>

<script setup>
import { userStore } from '@/store'
import { storeToRefs } from 'pinia' 
const user = userStore()

// 修改里面的值有3种写法
const changeName1 = () => {
  // 第一种 => 直接赋值
  user.name = '李四'
  // 第二种 => 使用$patch
  user.$patch({
    name: '李四'
  })
  // 第三种 => 使用仓库里面的方法
  user.changeName('李四')
};


// 如果是使用解构的方式取值的话需要使用这个方法,否则取出来的值不是响应式的
let { age } = storeToRefs(user)
// 修改年龄
const changeName2 = () => {
    age.value++
}

// 使用重置方法
const reset = () => {
  user.$reset();
}
</script>

npm i pinia-plugin-persistedstate

import { createPersistedState } from 'pinia-plugin-persistedstate' // 引入方法
pinia.use(createPersistedState({  
    storage: localStorage, 
    auto: true  // 自动存储所有仓库数据到localStorage
})) 

// 创建用户信息仓库
import { defineStore } from 'pinia'
export const userStore = defineStore('user', () => {
  ...
  ...
}, {
  // 在这个地方配置持久化
  persist: {
    ... 持久化配置如下
  }
})

1. 第一种配置
persist： true  // 整个仓库持久化

2. 第二种配置 (pick 和 omit 二选一)
persist: {
    pick: ['obj.username', 'name'],  // 存储哪些
    omit: ['obj.address']  // 忽略哪些不存储
}

3. 第三种配置
persist: {
    storage: sessionStorage 存储的位置
}

4. 第四种配置
persist: {
    key: 'my-userinfo' 存储的名称
}

5. 第五种配置 (一个仓库每个参数不同的存储方式)
persist: [
    {
      pick: ['name'],
      storage: localStorage,
      key: 'name'
    },
    {
      pick: ['age'],
      storage: sessionStorage,
      key: 'age'
    }
]