【vue3】使用pinia替代vuex
发布时间
阅读量：
阅读量
💡 pinia是vue团队推荐代替vuex的一款轻量级状态管理库。
1. 安装
npm i pinia --save
代码解释2. pinia特点
- 完全支持typescript语言的功能实现
- 经过优化的轻量化处理后文件大小仅为1.6kb
- 系统完全去除mutation相关功能仅保留state存储结构以及getters和actions操作接口
- 支持同时进行同步操作与异步操作以提高系统的响应效率
- 不采用模块化设计仅通过store对象实现数据隔离与存储管理其中store之间能够相互引用以增强代码的可管理性
3. 使用
1.初始化store
创建目录store/index.ts
import { createPinia } from 'pinia'
const store = createPinia()
export default store
代码解释2.在main.ts引用store
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')
代码解释3.创建store
基于功能模块在store中的设置生成相应的ts文件来管理各功能相关的数据信息。例如用户模块user.ts中包含两个关键字段：userInfo和token，并通过actions内部的方法对userInfo和token进行相应的更新操作。
import { defineStore } from 'pinia'
interface UserInfo {
name?: string
age?: number
}
// 第一个参数是id，id必填，且需要保证值唯一
export const useUserStore = defineStore('user', {
state: (): {
userInfo: UserInfo
token: string
} => {
return {
userInfo: {},
token: ''
}
},
getters: {
newName: state => state.userInfo.name + '牛'
},
actions: {
updateUserInfo(userInfo: UserInfo) {
this.userInfo = userInfo
},
updateToken(token: string) {
this.token = token
}
}
})
代码解释4.读取数据
引入要读取的store
<script setup lang="ts">
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
// 读取state中的数据
const userInfo: ComputedRef<{
name?: string
age?: number
}> = computed(() => userStore.userInfo)
// 读取getter中的数据
const newName = userStore.newName
</script>
代码解释5.修改数据
<script lang="ts" setup>
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
function handleLogin() {
userStore.updateUserInfo({ name: '李二' })
}
</script>
代码解释6.store的相互引用
不同store之间引用，举个🌰：创建user2.ts，引用user.ts的数据
import { defineStore } from 'pinia'
import { useUserStore } from './user'
export const useUser2Store = defineStore('user2', {
state: (): {
sex: string
} => {
return {
sex: '0'
}
},
actions: {
sayInfo(sex: string) {
this.sex = sex
// 引用其他store
const userStore = useUserStore()
console.log(
`我叫${userStore.newName}, 我是个小${
this.sex === '0' ? '姑娘' : '伙子'
}`
)
}
}
})
代码解释 在组件中使用user2模块
代码解释 <script lang="ts" setup>
import { useUser2Store } from '../../store/user2'
const user2Store = useUser2Store()
setTimeout(() => {
user2Store.sayInfo('1')
}, 3000) // 3s后输出----》 我叫李二牛, 我是个小伙子
</script>
代码解释7.devtools
在devtools中可以看到，pinia会自动根据文件区分模块
!
4.数据持久化
开启持久化可以在页面刷新的时候，帮我们把数据缓存下来，不被清空。
1.安装插件
npm i pinia-plugin-persist --save
代码解释2.引用插件
在store/index.ts引入插件，并且use
import { createPinia } from 'pinia'
import piniaPluginpersist from 'pinia-plugin-persist'
const store = createPinia()
// 使用持久化插件
store.use(piniaPluginpersist)
export default store
代码解释3.在store模块中启用持久化
(1) 启用
在user.ts中启用：添加persist配置项
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: (): {
userInfo: UserInfo
token: string
} => ({
userInfo: {},
token: ''
}),
getters: { ... },
actions: { ... },
// 开始数据持久化
persist: {
enabled: true
}
})
代码解释数据会默认存储到sessionStorage，可以在控制台看到。
(2) 修改key & 存储位置
默认情况下，默认在sessionStorage中存储的键值等于store模块的ID值。通过strategies可以调整键值以及存储位置，请问您是希望将键名更改为'_user'并将其存储于localStorage中吗？请注意，在此操作前sessionStorage中仍存留着旧数据，请您确认是否需要清除现有数据以避免冲突
persist: {
enabled: true,
strategies: [{
key: '_user',
storage: localStorage
}]
}
代码解释在控制台打印localStorage
(3) 自定义要持久化的字段
默认情况下，在库中所有的字段都会被缓存。通过指定paths参数可以选择性地选择需要缓存的字段。例如，在实际操作中
persist: {
enabled: true,
strategies: [{
key: '_user',
storage: localStorage,
paths: ['userInfo']
}]
}
代码解释控制台打印，可以看到token字段没有了！
全部评论 (0)
还没有任何评论哟~