pinia使用和持久化存储

官网：安装 | Pinia 中文文档

项目构建时选择安装pinia，下面是使用方法以及持久化存储配置

官网：快速开始 | pinia-plugin-persistedstate

1、安装持久化存储插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate -S

2、main.ts

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

const app = createApp(App)

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

app.use(pinia)
app.mount('#app')

3、在/src/store/目录下新建user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Tom', // 用户名
    age: 18, // 年龄
    weight: 60 // 公斤
  }),
  getters: {
    // 获取体重市斤
    getWeight: (state) => {
      return state.weight * 2
    }
  },
  actions: {
    // 修改用户名
    changeUserName(name: string) {
      this.name = name
    }
  },
  // 持久化插件配置
  persist: {
    key: 'store-user', // 本地存储key名称
    // storage: sessionStorage // 不设置默认存储localStorage
    paths: ['name'] // 指定持久化的值
  }
})

4、页面调用