一、使用pinia(uni-app)
1、下载pinia
npm install pinia
2、创建store文件夹
3、编写index.ts文件
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
// 所有这些属性都将自动推断其数据类型
language: 'zh',
login: false,
user_token: '',
user_name: '微信用户',
user_avatar: '',
articleId: '',
storeId: '',
}
},
getters: {},
actions: {
// 切换语言
switchLanguage() {
this.language == 'zh' ? (this.language = 'en') : (this.language = 'zh')
console.log(this.language)
},
// 设置登录状态
setLogin(status: any) {
console.log(status)
this.login = status
},
// 设置token
setToken(token: any) {
console.log(token)
this.user_token = token
},
// 设置用户名
setUserName(name: any) {
this.user_name = name
},
// 设置用户头像
setUserAvatar(url: string) {
this.user_avatar = url
},
// 设置文章id
setArticleId(id: any) {
this.articleId = id
},
// 设置商店id
setStoreId(id: any) {
this.storeId = id
},
},
// 开启数据持久化
persist: {
enabled: true,
},
})
4、在页面中使用
获取store中的数据
使用storeToRefs解构出来的数据是响应式的
使用actions中的方法 在 pinia中 没有mutations,只有 actions,不管是同步还是异步的代码,都可以在actions中完成。
5、模块化
在index中引入我们定义好的两个模块
然后分别书写其他两个文件和上面的index文件一致
二、pinia数据持久化 (uni-app)存储在uniStorage
1、使用 pinia-plugin-persist-uni
npm i pinia-plugin-persist-uni
2、在main.js中进行配置
3、在store中进行使用