pinia

安装

使用 pnpm 创建 vue 项目时选择了 pinia ，在生成的项目 main.js 中会自动引入 pinia。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import '@/assets/reset.css'
import '@/assets/main.scss'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')


// 安装持久化插件
pnpm add pinia-plugin-persistedstate -D

// 修改 main.js中向 pinia 中应用插件
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
import App from './App.vue'
import router from './router'
import '@/assets/reset.css'
import '@/assets/main.scss'

const app = createApp(App)

app.use(createPinia().use(persist))
app.use(router)

app.mount('#app')

// 验证持久化是否成功
// 向一个业务store中写入一个属性的值，F5刷新浏览器，该值扔存在则表示持久化成功

使用

创建文件 /store/user.js，完整代码如下

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore('big-user', () => {
    const token = ref('')
    const setToken = (newToken) =>{
        token.value = newToken
    }
    const removeToken = () => {
        token.value = ''
    }

    return {
        token, setToken, removeToken
    }
})

业务组件中使用如下

<template>
  <div>
    <h1>我是 app</h1>
    <p>{{ userStore.token }}</p>
    <el-button type="primary" @click="set1">登录</el-button>
    <el-button type="success" @click="remove1">退出</el-button>
  </div>
</template>

<script setup>
import { useUserStore } from './stores/user'

const userStore = useUserStore()
const set1 = () => {
  userStore.setToken('aa')
}

const remove1 = () => {
  userStore.removeToken()
}
</script>

统一管理

在上面使用案例的基础上添加文件 src/stores/index.js 代码如下

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)

export default pinia

// import { useUserStore } from './modules/user'
// export { useUserStore }
// 下面一行代替上面两行代码
export * from './modules/user'

在入库文件 main.js 中更换导入方法

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/reset.css'
import '@/assets/main.scss'

import pinia from '@stores/index'

const app = createApp(App)

app.use(pinia)
app.use(router)
app.mount('#app')

在统一管理 pinia 的方法下，业务组件中从 index.js 中导入需要的子模块 import { useUserStore } from '@stores'