五、Vue3状态管理[pinia]

2024-01-07 17:54:44

一、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')

文章来源:https://blog.csdn.net/weixin_46765649/article/details/135430036
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。