Pinia

最新推荐文章于 2024-08-07 16:55:16 发布

yanammm

最新推荐文章于 2024-08-07 16:55:16 发布

阅读量226

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/VOID_Pointer_G/article/details/126397364

版权

安装

yarn add pinia -D

main.js 注册

import { createPinia } from 'pinia'

app.use( createPinia() )

定义 store

创建 src/store/index.js

import { defineStore } from 'pinia'

export const useCommentStore = defineStore('comment', {
    state: () => {
        return {
            curCommentList: []
        }
    },
    getters: {
        getCurCommentList(state) {
            return state.curCommentList
        }
    },
    actions: {
        changeCommentList = curCommentList
    }
})

页面中使用

import store from '../store'
import { storeToRefs } from 'pinia'
const { useLoginStore, useCommentStore } = store
const commentStore = useCommentStore()
const curUsername = useLoginStore().getCurUsername
const { curCommentList } = storeToRefs(commentStore)

修改 state

import { useLoginStore } from './store/loginStore.js'
import { storeToRefs } from 'pinia'
const loginStore = useLoginStore()
const { curUsername } = storeToRefs(loginStore)

const router = useRouter()
const formState = reactive({
    usename: '',
    password: '',
    remember: true
})

const onFinish = values => {
    const { usename } = values
    
    /* 01 直接修改某个值*/
    curUsername.value = username
    
    /* 02 同时修改多个数据，建议使用 $patch 实现批量更新，在内部做优化 */
    loginStore.$patch({
        curUsername: username
    })
    
    /* 03 更好的批量更新方法，通过 $patch 传递函数实现 */
    loginStore.$patch((state) => {
        syaye.curUsername = usename
    })
    
    /* 通过 actions 修改数据 */
    loginStore.changeCurUsername(usename)

    
    router.push('/commentOn')
}

getters 使用及注意事项

getter 只是计算属性，无法向它传递任何参数

可以从 getter 返回一个函数来接收任何参数，但是getter不再缓存，但是可在 getter 本身内部缓存一些结果

import { defineStore } from 'pinia'

const useMainStore = defineStore('main', {
    state: () => {
        return {
            count: 1
        }
    },
    getters: {
        comp(state) {
            return (num: number) => {
                return state.count + num
            }
        }
    }
})

export { useMainStore }

使用

<template>
	<p>{{ mainStore.comp(2) }}</p>
    <p>{{ mainStore.comp(3) }}</p>
    <p>{{ mainStore.comp(4) }}</p>
</template>	

<script setup lang="ts">
// 导入 pinia 实例
import { useMainStore } from '../store/index'

// 实例化容器
const mainStore = useMainStore()
</script>

pinia 持久化存储

手动利用 localStorage 或 sessionStorage 进行存储

// 01 保存数据
const instance = useLoginStore()
instance.$subscribe((_, state) => {
    localStorage.setItem('login-store', JSON.stringify({ ...state }))
})

// 02 获取保存的数据，先判断有无，无则用先前
const old = localStorage.getItem('login-store')
if(old) {
    instance.$state = JSON.parse(old)
}

利用持久化工具 pinia-plugin-persist

安装
```
yarn add pinia-plugin-persist -D
```

main.js 引入

import { createPinia } from 'pinia'

import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)

const app = createApp(App)

app.use(store)

store 中配置参数 persist

import { defineStore } from 'pinia'

export const useLoginStore = defineStore('login', {
    state: () => {
        return {
            token: '',
            curUsername: ''
        }
    },
    persist: {
        enabled: true,
        // 自定义持久化参数
        strategies: [
            {
                key: 'login_store',
                storage: localStorage,
                paths: ['curUsername']
            }
        ]
    },
    getters: {
        getCurUsername(state) {
            return state.curUsername
        }
    },
    actions: {
        changeCurUsername(curUsername) {
            this.curUsername = curUsername
        }
    }
})