插件和版本

1、安裝依賴

npm i pinia // 安裝 pinia
npm i pinia-plugin-persist // 安裝持久化存儲(chǔ)插件

2、main.js引入

import App from './App.vue'
const app = createApp(App)

//pinia
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist' //持久化插件
const pinia = createPinia()
pinia.use(piniaPersist)
app.use(pinia)

app.mount('#app')

3、在src下新建store文件，在store文件內(nèi)新增home.js：

src/store/home.js（可直接復(fù)制）

import { defineStore } from 'pinia'
// useMain  可以是 useUser、useCart 之類的名字 返回的函數(shù)統(tǒng)一使用useXXX作為命名方案，這是約定的規(guī)矩
// defineStore('main',{..}) 在devtools 就使用 main 這個(gè)名
/*defineStore 是需要傳參數(shù)的，其中第一個(gè)參數(shù)是id，就是一個(gè)唯一的值，
簡單點(diǎn)說就可以理解成是一個(gè)命名空間.
第二個(gè)參數(shù)就是一個(gè)對(duì)象，里面有三個(gè)模塊需要處理，
第一個(gè)是 state，第二個(gè)是 getters，第三個(gè)是 actions。
*/
export const useMain = defineStore('main', {
    // 相當(dāng)于data
    state: () => {
        return {
          // 所有這些屬性都將自動(dòng)推斷其類型,如果推斷失敗可以試下 as xxx
          counter: 0,
          name: 'Eduardo',
          objPer:{
            age:18,
            like: '唱跳rap'
          }
        }
    },
    // 相當(dāng)于計(jì)算屬性
    getters: {
        doubleCount: (state) => {
            return state.counter * 2
        },
    },
    // 相當(dāng)于vuex的 mutation + action，可以同時(shí)寫同步和異步的代碼
    actions: {
        increment() {
          //this.是store實(shí)例
          this.counter++
        },
        randomizeCounter(num) {
            setTimeout(() => {
                //this.是store實(shí)例
                // this.counter = Math.round(100 * Math.random())
                this.counter = num
            }, 0);
        },
    },

    //配合pinia-plugin-persist插件 持久化 默認(rèn)存儲(chǔ)到 sessionStorage ，key 為 store 的 id
    persist: {
      enabled: true,
    }
})

4、在頁面A內(nèi)使用獲取值以及修改值（可直接復(fù)制）

<template>
  <div>{{ name }}</div>
  <div>counter:{{ counter }}</div>
  <div>doubleCount:{{ doubleCount }}</div>
  <div>objPer：{{ objPer }}</div>
  <a-button @click="changeCounter">修改counter</a-button>
  <br>
  <a-button type="primary" @click="main.increment()">counter++</a-button>
  <br>
  <a-button @click="amend()">修改多個(gè)</a-button>
</template>
<script setup lang='ts'>

//引入想要的pinia文件 {} 里面就是對(duì)應(yīng)導(dǎo)出的名字
import { useMain } from '../store/home'
import { storeToRefs } from 'pinia';

const main = useMain()
// 解構(gòu)main里面的state和getters的數(shù)據(jù)，
// 使用storeToRefs解構(gòu)才有響應(yīng)式，響應(yīng)式可以直接修改數(shù)據(jù)，不過這我只用來渲染
let { counter, name, doubleCount, objPer } = storeToRefs(main)

//（常用方法三種）
//常用方法一： 使用數(shù)據(jù)
console.log(counter.value);
//使用方法(方法目前不能解構(gòu))
main.increment()
console.log(counter.value);

// 常用方法二：修改數(shù)據(jù)
counter.value = 9999
console.log(counter.value);

objPer.value = {
  age:1,
  like:'哎呦 你干嘛~'
}

//常用方法三：
//進(jìn)階使用$patch，多個(gè)修改
const amend = () => {
  main.$patch((state) => {
    state.counter += 10;
    state.name = '張三'
    state.objPer = {
      age:11,
      like:'雞你太美~'
    }
  })
}

function changeCounter(){
  main.randomizeCounter(Math.round(100 * Math.random()))
}

</script>

5、在頁面B內(nèi)引入并使用和查看值（可直接復(fù)制）

<template>

  <div>objPer:{{ objPer }}</div>
  <button @click="resetStore">重置pinia</button>
</template>
<script>
//引入想要的pinia文件 {} 里面就是對(duì)應(yīng)導(dǎo)出的名字
import { useMain } from '../../store/home'
import { storeToRefs } from 'pinia';

const main = useMain()
// 解構(gòu)main里面的state和getters的數(shù)據(jù)，
// 使用storeToRefs解構(gòu)才有響應(yīng)式，響應(yīng)式可以直接修改數(shù)據(jù)，不過這我只用來渲染
let { objPer } = storeToRefs(main)


export default {
  name: 'test',
  setup () {

    // 重置pinia
    function resetStore(){
      main.$reset()
    }
    // 將變量和函數(shù)返回，以便在模版中使用
    return {
      objPer,
      resetStore
    }
  }
}
</script>

6、查看值

參考文章1
參考2
參考3文章來源地址http://www.zghlxwxcb.cn/news/detail-645759.html

到了這里，關(guān)于vue3使用pinia和pinia-plugin-persist做持久化存儲(chǔ)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！