如何在Vue3中使用Pinia?

使用piaia   

 官网:Pinia （劈你啊）：点击去往pinia官网

1.首先需要下载pinia包

1.使用yarn下载:

yarn add pinia -S

2.使用npm下载:

npm i -S pinia 

2.在main中引入pinia

// 引入pinia
import {createPinia} from "pinia";  // 引入pinia

// 将pinia的实例赋值给变量
const pinia=createPinia()

// 引入pinia自动持久化插件
import {createPersistedState} from 'pinia-plugin-persistedstate'

// 注册插件
pinia.use(createPersistedState())

3.创建pinia实例

const pinia=createPinia()

4.在vue中注册pinia实例

const app = createApp(App)
// 注册pinia
app.use(pinia)

app.mount('#app')

5.创建store文件夹，在这个文件夹下面创建index文件，范例使用的是ts

import {defineStore} from "pinia"; //引入pinia

import {computed, ref} from "vue";

// 导出  注意:使用defineStore创建的pinia都是单独的模块，需要起名比如user
export const userStore =defineStore('user',()=>{
// 就等同于vuex中的state
    const count=ref(0)
// 就等同于vuex中的异步修改和同步修改
    const addCount=()=>count.value++
//  等同于getter
    const bgCom=computed(()=>count.value * 2)
// 将要共享的数据和方法抛出
    return {count,addCount}
})

 6.这样就可以在别的页面使用这些数据了

import {userStore} from "./store"; // 引入需要使用的pinia的user模块

const store=userStore() //引入的这个userStore是个函数，得加上小括号调用在赋值

使用时可以通过store来调用：
 // 调用方法
 <button @click="store.addCount()">点击一下</button>
 // 调用变量
 <div>{{ store.count }}</div>

7.补充:也可以使用结构赋值的方式来调用pinia下的数据，此时就可以不用store.count

import {userStore} from "./store"; // 引入需要使用的pinia的user模块

const {count}=storeToRefs(userStore()) //要使用pinia下的某个变量而不想.的时候，可以将这个数据结构出来,但是解构的数据不是响应式的，需要使用storeToRefs将需要被结构的数据源包裹起来

// 解构方法就不需要包裹了，直接解构就行 包裹会报错
const {addCount} = userStore()
 // 调用方法
 <button @click="addCount()">点击一下</button>

 // 调用变量  此时就可以直接使用这个解构出来的变量了
 <div>{{ count }}</div>

如何将将pinia的数据进行持久化呢？

1.需要下载一个插件

使用yarn下载
yarn add pinia-plugin-persistedstate -S

使用npm下载
npm i pinia-plugin-persistedstate -S

2.在main中注册这个插件，因为这个包时pinia下的插件，所以需要注册到pinia中

// 引入pinia
import {createPinia} from "pinia";
// 创建pinia实例
const pinia=createPinia()
// 引入pinia自动持久化插件
import {createPersistedState} from 'pinia-plugin-persistedstate'
// 注册插件
pinia.use(createPersistedState())

3.pinia那个模块需要开启持久化就开启持久化

比如我的use模块就需要开始持久化，就需要找到store下的index文件给user模块开启持久化

import {defineStore} from "pinia";

import {computed, ref} from "vue";

export const userStore =defineStore('user',()=>{

    const count=ref(0)

    const addCount=()=>count.value++

    const bgCom=computed(()=>count.value * 2)

    return {count,addCount}

},{

    persist:true //设置为true

})

这样就将数据进行持久化了，对比vuex的话超级简单