1.pinia的簡(jiǎn)單介紹

Pinia最初是在2019年11月左右重新設(shè)計(jì)使用Composition API的 Vue 商店外觀的實(shí)驗(yàn)。
從那時(shí)起，最初的原則相同，但 Pinia 適用于 Vue 2 和 Vue 3 。
并且不需要你使用組合 API。
除了安裝和SSR之外，還有其他的 API是一樣的。
并且這些針對(duì) Vue 3 ，并在必要時(shí)提供 Vue 2 的相關(guān)注釋。
以便 Vue 2 和 Vue 3 的用戶(hù)可以閱讀！

2.為什么要使用Pina？

Pinia 是 Vue 的存儲(chǔ)庫(kù)，
允許您跨組件/頁(yè)面共享狀態(tài)。
如果您的組合 API，您可能會(huì)認(rèn)為您可以使用簡(jiǎn)單的export const state = reactive({})
這對(duì)于單頁(yè)應(yīng)用程序來(lái)說(shuō)是正確的，
但如果它是服務(wù)器端的外觀，將您的應(yīng)用程序顯示給安全漏洞。
但即使在小型單頁(yè)應(yīng)用程序中，您也可以從使用 Pinia 中獲得好處：
1.開(kāi)發(fā)工具支持
2.動(dòng)作、追蹤的跟蹤
3.熱模塊更換
4.為 JS 用戶(hù)提供適當(dāng)功能的 TypeScript 支持或自動(dòng)完成
5.服務(wù)器端渲染支持

安裝

npm install pinia --save

3.創(chuàng)建文件夾和文件-存放數(shù)據(jù)

在新建 src/store目錄并在其下面創(chuàng)建 index.ts文件，并導(dǎo)出這個(gè)文件

// src/store/index.ts下的代碼
import { createPinia } from 'pinia'
const store = createPinia()
export default store

在 main.ts 中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

import store from "./store/index"

createApp(App).use(router).use(store).mount('#app')

需求描述

假設(shè)我們現(xiàn)在有好幾個(gè)模塊。有user模塊。admin模塊。
我們想對(duì)這模塊中的數(shù)據(jù)進(jìn)行管理。
為了管理方便，后面易于維護(hù)。我們決定將這些模塊進(jìn)行拆分。
于是我們?cè)趕tore下創(chuàng)建 user.ts 文件，管理這個(gè)user模塊的數(shù)據(jù)。

user.ts下的數(shù)據(jù)

//src/store/user.ts 文件
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
    id: 'userkey', // id必填，且需要唯一
    // state是存放數(shù)據(jù)的  
    state: () => {
        return {
            name: '于途',
            likelist:[],
            sex:'男',
            work:'寫(xiě)代碼',
            heigt:'1.70cm'
        }
    },
})

defineStore的介紹

defineStore 接收兩個(gè)參數(shù).
第一個(gè)參數(shù)：必須是唯一的，多個(gè)模塊千萬(wàn)千萬(wàn)不能重名。
因?yàn)镻inia 會(huì)把所有的模塊都掛載到根容器上
第二個(gè)參數(shù)是一個(gè)對(duì)象，里面的選項(xiàng)state和 Vuex 差不多

4.獲取store中值的第一種方法

獲取store中值的第二種方法-computed

提出問(wèn)題

如果對(duì)象上有多個(gè)屬性，可以進(jìn)行結(jié)構(gòu)嗎？
可以的！
使用 pinia 提供的 storeToRefs
我們來(lái)看下怎去使用

5.pinia 提供的 storeToRefs進(jìn)行結(jié)構(gòu)

6.如何修改 state 中的數(shù)據(jù)

修改 state 中的數(shù)據(jù)，可以通過(guò) actions 下的方法。
然后調(diào)用 updataName 就可以取修改 state中的name值了
//src/store/user.ts 文件
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
    id: 'userkey', // id必填，且需要唯一
    // state是存放數(shù)據(jù)的  
    state: () => {
        return {
            name: '于途',
            likelist:[],
            sex:'男',
            work:'寫(xiě)代碼',
            heigt:'1.70cm'
        }
    },
    // actions 可以修改state中的值，這里面提供方法
    actions:{
        // 修改name中的數(shù)據(jù)
        updataName(name:string){
            this.name=name
        },
    },
})

調(diào)用方法，修改state中的name

十多年的石嘴山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整石嘴山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“石嘴山網(wǎng)站設(shè)計(jì)”,“石嘴山網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

7.getters的使用

//src/store/user.ts 文件
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
    id: 'userkey', // id必填，且需要唯一
    // state是存放數(shù)據(jù)的  
    state: () => {
        return {
            name: '于途',
            likelist:[],
            sex:'男',
            work:'寫(xiě)代碼',
            heigt:'1.70cm',
            age:26,
        }
    },
    // actions 可以修改state中的值，這里面提供方法
    actions:{
        // 修改name中的數(shù)據(jù)
        updataName(name:string){
            this.name=name
        },
    },
    // Getter 完全等同于 Store 狀態(tài)的計(jì)算值
    getters:{
        // 將姓名進(jìn)行更改
        getName: (state) => {
            return state.name + 'hahha~!'
        }
    }
})

//使用的頁(yè)面.vue

    

對(duì)于getters的使用的說(shuō)明

Getter 完全等同于 Store 狀態(tài)的計(jì)算值 computed.
并不會(huì)影響原始數(shù)據(jù)

9.異步actions-設(shè)置state中的值

//src/store/user.ts 文件
import { defineStore } from 'pinia'
// 引入接口
import { getUser } from "../https/api";
export const useUserStore = defineStore({
    id: 'userkey', // id必填，且需要唯一
    // state是存放數(shù)據(jù)的  
    state: () => {
        return {
            name: '于途',
            likelist:[],
        }
    },
    // actions 可以修改state中的值，這里面提供方法
    actions:{
        // 修改name中的數(shù)據(jù) 同步
        updataName(name:string){
            this.name=name
        },
        // 異步-獲取遠(yuǎn)端的數(shù)據(jù)
        loadUserList(){
            getUser({}).then(res=>{
                this.likelist = res
            })
        }
        // 使用await和async 第二種方法
        // async loadUserList(){
        //     const list = await getUser({})
        //     console.log('list',list)
        //     this.likelist = list
        // }
    },
})

使用的頁(yè)面

    

11.數(shù)據(jù)持久化-sessionStorage 或 localStorage

我們都知道，vuex刷新后，數(shù)據(jù)會(huì)丟失。
這個(gè)時(shí)候我們需要將數(shù)據(jù)進(jìn)行持久化。
我們可以考慮sessionStorage或者localStorage

//src/store/user.ts 文件
import { defineStore } from 'pinia'
// 引入接口
import { getUser } from "../https/api";
export const useUserStore = defineStore({
    id: 'userkey', // id必填，且需要唯一
    // state是存放數(shù)據(jù)的  
    state: () => {
        return {
            // 數(shù)據(jù)持久化使用的是sessionStorage
            name: sessionStorage.getItem('name') ? sessionStorage.getItem('name') :  '于途',
            likelist:[],
        }
    },
    actions:{
        // 修改name中的數(shù)據(jù) 同步
        updataName(name:string){
            sessionStorage.setItem('name', name)
            this.name=name
        },
    },
})



    

12.跨模塊修改數(shù)據(jù)

雖然我不建議跨模塊修改數(shù)據(jù)。
因?yàn)檫@樣可能會(huì)導(dǎo)致你的應(yīng)用數(shù)據(jù)流向變得難以理解。
但是有些時(shí)候確實(shí)需要跨模塊修改數(shù)據(jù)。
那么pinia怎么去處理跨模塊修數(shù)據(jù)呢？
下面我們一起來(lái)探索跨模塊修改數(shù)據(jù)！
假設(shè)admin模塊需要去修改user模塊中的數(shù)據(jù)

admin.ts代碼如下

//src/store/admin.ts 文件
import { defineStore } from 'pinia'
// 引入user模塊
import { useUserStore } from './user'
export const adminUserStore = defineStore({
    id: 'adminkey', 
    actions:{
      // 通過(guò)引入的useUserStore模塊，然后去觸發(fā)它里面對(duì)應(yīng)的方法。
       editUserModuleValue(name:string){
           //  userStore可以看見(jiàn)整個(gè)user模塊中的數(shù)據(jù)和方法
           let userStore=useUserStore()
           console.log('userStore',userStore)
           userStore.updataName(name)
       }
    },
})

user.ts代碼

//src/store/user.ts 文件
import { defineStore } from 'pinia'
// 引入接口
export const useUserStore = defineStore({
    id: 'userkey', // id必填，且需要唯一
    // state是存放數(shù)據(jù)的  
    state: () => {
        return {
            name: '于途',
            likelist:[],
            sex:'男',
            work:'寫(xiě)代碼',
            heigt:'1.70cm'
        }
    },
    actions:{
        // 修改name中的數(shù)據(jù) 同步
        updataName(name:string){
            this.name=name
        },
    },
})

頁(yè)面的使用

尾聲

如果你覺(jué)得我寫(xiě)的不錯(cuò)的話(huà)，可以給我推薦、打賞、評(píng)論!
上一個(gè)給我打賞的小伙伴都已經(jīng)找到女朋友了!
咦!你不信，不信你給我打賞看一下!
保準(zhǔn)你追到到喜歡的Ta!
你不會(huì)追，哎!難受。

我教你，你可以這樣說(shuō):
小生不才，斗膽-問(wèn)，不知姑娘是否心系他人。
感情之事，在下不敢兒戲!
如若姑娘早已心系他人。那在下便不再打擾。
如若有所唐突還望姑娘多加體諒!
若姑娘非我良人，那在下就不庸人自惱。
在下怕越陷越深，還望姑娘盡早告知!話(huà)已至此，我便先在此謝過(guò)!
拿去不謝!回頭告訴我結(jié)果啊!
咦!抓住一個(gè)沒(méi)有打賞的小伙伴!

文章標(biāo)題：vue下一代狀態(tài)管理Pinia.js 保證你看的明明白白！
本文來(lái)源：http://weahome.cn/article/dsojpje.html