Vue3推荐的替代Vuex的新一代状态管理工具：Pinia 配置教程

Pinia 官方网站：pinia.vuejs.org

一、安装Pinia

npm install pinia --save

二、配置Pinia

（默认项目都使用 TypeScript ，默认后缀都是.ts）
在 src 目录内新建一个 store 的目录，然后在此目录下新建一个 index.ts 文件，内容如下：

import { createPinia } from 'pinia'

const store = createPinia()

export default store

三、在项目中注册并启用Pinia

打开项目下的 “main.ts”，在里面追加pinia的内容：

import { createApp } from 'vue'
import App from './App.vue'
// 导入Pinia状态管理器
import store from './store/index'

createApp(App).use(store).mount('#app')

四、创建一个State

在 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
		},
	},
})

五、在页面中使用这个Store

例如需要在 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的数据持久化，使用插件（pinia-plugin-persist）

pinia plugin persist官方网站：pinia-plugin-persist

1、安装 pinia-plugin-persist

npm install pinia-plugin-persist --save

2、在 Pinia 中启用 pinia-plugin-persist

打开 src/store/index.ts ，修改内容如下：

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

const store = createPinia()
store.use(piniaPluginPersist)

export default store

3、在一个state中使用localStorage存储数据

打开上面创建的 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是需要存储的字段，不填就是全部
			},
		],
	},
})