Vue3 pinia 的用法

1.  首先，先安装一下 Pinia

npm install pinia // 安装pinia 

 

2.然后安装一下一下持久化

npm install pinia pinia-plugin-persistedstate

 

3.在 main.js 或者 main.ts 的文件中开始部署

import { createSSRApp } from 'vue'
import { createPinia } from 'pinia' // 导入 createPinia //配置 Pinia
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //配置 pinia的持久化


export function createApp() {
  const app = createSSRApp(App)
  const pinia = createPinia() //创建 pinia
  pinia.use(piniaPluginPersistedstate) // pinia 使用持久化
  app.use(pinia) //使用 pinia 

  return {
    app 
  }
}

 

4. 首先，先建立一个 store的文件夹，底下创建一个 index.js 或者 index.ts  的文件

import { defineStore } from 'pinia' //引入 pinia

export const userStore = defineStore('user',{

  state: () => {
    return {
      //这里写需要的属性。例如：
      token: null,
    }
  },    
        actions:{

           //这里写调用的方法。例如：
           async logoutClick(){
          const res = await logout() //这里调用方法，方法需要自行引入
        //这里开始写其他逻辑，例如：
               this.token = null
      },
    
        }
    
})

5. 接下来就是开始调用 store的属性了，这里是 vue2 的写法

import { userStore } from '../../store/user'; //引入 store ，按照你们自己的路劲去引入

userStore().$patch((state)=>{
  state.这里是你上面在 store定义的属性 = 这里是你要传入 store 的属性
})

6.这里是你要应用的 store的属性，这里还是vue2的写法

import { userStore } from '../../store/user'; //引入 store 路劲，按照你们自己的路径引入

userStore().这个就是你上面在 store 存储的属性，这里获取回来

7. 这里开始调用 store的属性/方法，这里是 vue3的写法

import { userStore } from '../../store/user'; //引入 store的路径，按照你们自己的路劲引入

//在 vue3 是需要用一个 变量去接收 store 的。 store 可以 点某个属性，也可以点某个方法。例如：store.logoutClick()

const store = userStore(); 
store .$patch((state)=>{
    state.设置的属性  = 要传入store的数据
})

8.这里是你要应用的 store的属性，这里还是 vue3的写法

import { userStore } from '../../store/user'; //引入 store的路径，按照你们自己的路劲引入

//在 vue3 是需要用一个 变量去接收 store 的。 store 可以 点某个属性，也可以点某个方法。例如：store.logoutClick()

const store = userStore(); 

store.某个属性 //可以在div里面直接写，不需要二次赋值