1.创建pinia缓存文件 import{defineStore}from'pinia'exportconstuseMenuStore=defineStore({id:'menu',state:()=>{return{openMenu:[],menuIdx:0,menuRoute:[]}},getters:{},actions:{},// 开启数据缓存persist:{enabled:true,strategies:[{key:'my_project',storage:sessionStorage,}]}}) 2.路由入口 impo...
*参数3:持久化配置 import { defineStore } from'pinia'import { ref,computed } from'vue'export const useUserstore=defineStore('user', ()=>{return{} }, { persist:true} ) // 选项式api import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: ...
3.如何开启持久化?创建 Store 时,将persist选项设置为true。import { defineStore } from 'pinia' export const useStore= defineStore('store', { state: ()=>{ save:{ me:'saved', notMe:'not-saved' }, saveMeToo:'saved' }, persist: { key:'ljq-store', paths:['save.me','saveMeToo'],...
persist支持多种类型的值,最简单的就是传递true,此时会将状态缓存在localStorage中,该localStorage的 key 为模块名(defineStore的第一个参数),value 为该模块的状态对象,由于该模块只有一个状态counter,故value为{"counter":8}。如下图: 如果需要将其存储在sessionStorage中,就需要设置persist的值为一个对象: ... ...
// /src/store/index.tsimport { createPinia } from 'pinia';import { createPersistedState } from 'pinia-plugin-persistedstate';export const pinia = createPinia().use(createPersistedState());// /src/store/modules/auth.tsimport { defineStore } from 'pinia';export const authStore = defineStore(...
userStore.name = '李四' 复制代码 但一般不建议这么做,建议通过 actions 去修改 state,action 里可以直接通过 this 访问。 export const useUserStore = defineStore({ id: 'user', state: () => { return { name: '张三' } }, actions: { ...
接下来,我们创建一个名为counter.ts的Store文件,并启用持久化功能: // src/stores/counter.tsimport{defineStore}from'pinia';interfaceCounterState{count:number;}exportconstuseCounterStore=defineStore('counter',{state:():CounterState=>({count:0,}),actions:{increment(){this.count++;},},persist:true,...
export const useCounterStore = defineStore('counter', () => { // State -- 定义目标状态 count,默认值为 0 const count = ref(0) // Getter -- 定义自动计算的状态,它随目标状态 count 的变化,会自动生成新的值 const doubleCount = computed(() => count.value * 2) ...
数据默认存储在sessionStorage中,以Store的id作为key。 如果需要,我们还可以指定数据的存储位置以及key: import{ defineStore }from'pinia'exportconstuseUserStore =defineStore('user', {// 其它代码...// 开启持久化persist: {enabled:true,strategies: [ ...
=defineStore('user', { state:() => ({cookie:null// 定义了一个数据cookie})// 类似于data用来定义数据getters: {}// 类似于计算属性actions: {setCookie(payload){// payload为修改的新值(载荷)this.cookie= payload } }// 用来修改值的操作persist:true// 将vuex中的数据和localstorage关联起来})...