vue3 使用 pinia

模块化使用：

安装 pinia

npm i pinia

持久化存储

npm i pinia-plugin-persist --save

1、新建 store

import { createPinia } from 'pinia'
const store = createPinia()

// 引入持久化存储插件
import piniaPluginPersist from 'pinia-plugin-persist'
// 使用插件
store.use(piniaPluginPersist)

export default store

2、新建 user.js （模块区分同样方式建立，如增加 shop.js）

import {
	defineStore
} from 'pinia'

export const user = defineStore('user', {
	state: () => {
		return {
			nickName: '张三',
			age: 18
		}
	},
	actions: {
		changeAge(val) {
			this.age += val
		}
	},
	// 开启数据持久化存储
	persist: {
		enabled: true,
		//配置存储方式，默认 sessionStorage 新建窗口会还原初始数据
		strategies: [{
			key: 'user',
			storage: localStorage,
			paths: ['age'] //指定某个数据持久化存储，不指定则全部默认持久化
		}]
	}
})

3、引入 store

import store from './store'

app.use(store)

4、使用

import { storeToRefs } from 'pinia'
import { user } from '../../store/user.js'

let userStore = user();
let { nickName,age } = storeToRefs(userStore);

const logOutBtn = () => {
	//age.value += 2
	userStore.changeAge(100)
}

输出结果：