uni-app中 pinia的使用

 一、使用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中进行使用