五、Vue3状态管理[pinia]

一、pinia

解释：伴随vue2到vue3的升级，官方已经用Pinia代替了Vuex成为官方的状态管理库，Pinia对ts的支持更好，更适合大型项目的开发

1.安装

npm install pinia

2.配置main.ts

import { createPinia } from 'pinia'
​
const pinia = createPinia()
// 挂载pinia
app.use(pinia)

3.使用

定义：

import { defineStore } from 'pinia'
​
// 第一个参数是应用程序中 store 的唯一 id
// 第二个参数是配置对象
export const useUserStore= defineStore('goods', {
  // 定义存储的唯一ID
  id: 'app-user',
  // 初始状态
  state: => ({
    username: null,
    type:null
  }),
  /**
   * 定义获取状态的方法,返回的状态是state中保存的状态
   */
   // 在此可以类似计算属性对传入值进行处理
  getters: {
    getUsername(state): string | null {
      return state.username
    },
    getType(state): string| null {
      return state.type
    }
  },
    /**
   * 定义修改状态的方法
   */
   // 这里可以写自己定义的函数
  actions: {
    setUsername(username: string | null) {
      this.username = username
    },

    setType(type: string | null) {
      this.type= type
    }
  }
})

调用：

import { useUserStore } from '@/store/modules/user'
// 使用useUserStore()获取userStore，在userStore中定义了role
const userStore = useUserStore()

// 调用变量
const type = userStore.getType
// 调用函数
userStore.setUsername('jack')