pinia

139 阅读1分钟

pnpm config set save-prefix=''默认不更新插件

一、Pinia是什么

Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。

二、为什么要使用 Pinia?

通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,会使您的应用程序暴露于安全漏洞---跨请求状态污染(Cross-Request State Pollution) 多个请求重复使用

参考介绍 | Pinia 中文文档 (web3doc.top)

三、使用

安装 pnpm i pinia

引入pinia

使用全局store

const useStore = defineStore('store',{
    state(){//函数,数据
        return{
            me:{
                name:'frank'
            }
        }
    },
    actions:{//对象
        refetchMe(){
            this.me.name = 'xxx'
            ajax().then(()=>{
                this.me
            })
        }
    }
})

在main.ts中使用pinia

const test = createApp(Test)
const pinia = createPainia()
test.use(pinia)