Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇。
Pinia.js 有如下特点:
- 完整的 typescript 的支持;
- 足够轻量,压缩后的体积只有1.6kb;
- 去除 mutations,只有 state,getters,actions(这是我最喜欢的一个特点);
- actions 支持同步和异步;
- 没有模块嵌套,只有 store 的概念,store 之间可以自由使用,更好的代码分割;
- 无需手动添加 store,store 一旦创建便会自动添加;
一、安装
npm install pinia --save //安装pinia
npm install pinia-plugin-persist --save //安装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
三、注册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/modules 目录下新建一个 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
},
},
})
五、使用
<template>
{{ store.fullName }}
<p>
<button @click="onChangeName()">改变Store里的名字</button>
</p>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { userStore } from '@/store/modules/user'
const store = userStore()
const onChangeName = (name) => {
store.updateUserName(name ?? '李同学')
}
onMounted(() => {
onChangeName('张同学')
})
</script>
<style scoped></style>