Pinia 官方网站:pinia.vuejs.org
npm install pinia --save
(默认项目都使用 TypeScript ,默认后缀都是.ts)
在 src 目录内新建一个 store 的目录,然后在此目录下新建一个 index.ts 文件,内容如下:
import { createPinia } from 'pinia'
const store = createPinia()
export default store
打开项目下的 “main.ts”,在里面追加pinia的内容:
import { createApp } from 'vue'
import App from './App.vue'
// 导入Pinia状态管理器
import store from './store/index'
createApp(App).use(store).mount('#app')
在 src/store 目录下新建一个 user.ts 文件,内容如下:
import { defineStore } from 'pinia'
export const userStore = defineStore('userInfo', {
state: () => {
return {
userID: '10001',
userName: '某同学',
}
},
getters: {
fullName: (state) => {
return `${state.userName}(${state.userID})`
},
},
// action 支持 async/await 的语法,可以自行添加使用
// action 里的方法相互之间调用,直接用 this 访问即可
actions: {
updateUserName(name: string) {
this.userName = name
},
},
})
例如需要在 app.vue 这个页中使用,内容如下:
<template>
{{ store.fullName }}
<p>
<button @click="onChangeName()">改变Store里的名字</button>
</p>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { userStore } from '@/store/user'
const store = userStore()
const onChangeName = (name) => {
store.updateUserName(name ?? '李同学')
}
onMounted(() => {
onChangeName('张同学')
})
</script>
<style scoped></style>
到此一个基础的store就已经完成,如果还需要结合Local Storage持久化存储数据,接着往下看
pinia plugin persist官方网站:pinia-plugin-persist
npm install pinia-plugin-persist --save
打开 src/store/index.ts ,修改内容如下:
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store
打开上面创建的 user.ts 文件,修改内容如下:
import { defineStore } from 'pinia'
export const userStore = defineStore('userInfo', {
state: () => {
return {
userID: '10001',
userName: '某同学',
}
},
getters: {
fullName: (state) => {
return `${state.userName}(${state.userID})`
},
},
actions: {
updateUserName(name: string) {
this.userName = name
},
},
// 开启数据缓存
persist: {
enabled: true,
strategies: [
{
key: 'my_project', // key可以自己定义,不填的话默认就是这个store的ID
storage: localStorage, // storage可以填sessionStorage,localStorage
paths: ['userID', 'userName'] }, // paths是需要存储的字段,不填就是全部
},
],
},
})