状态管理 Vuex

在 Vue3 中,并不一定要使用 Vuex 进行状态管理,由于 SeeDAO OS 是从 Vue2 升级上来的,基本上仍然保留使用 Vuex。大家仍然可以使用 Provide / Inject 功能,但如果有与其他状态交互,请使用 Vuex 进行管理。

建立新的状态

针对一类状态,请在 src/modules 下建立 <MODULE NAME>.js

本项目的 Module 写法与常见的不同,约定如下:

// Services
import api from "@/services/api.service"

// Constants
const BLAH_BLAH = "blah_blah"

// Action types
export const XXXX_1 = "action1"
export const XXXXXXXXXX_2 = "action2"

// Mutation types
// 请用 SET_ 开头
export const SET_XXXXXXXXXXXX_1 = "mutation1"
export const SET_XXXXXX_2 = "mutation2"

// Getter types
// 请用 GET_ 开头
export const GET_XXXX_1 = "getter1"
export const GET_XXXXXXXXXXX_2 = "getter2"

// States
const state = {
  a: 1,
  b: [],
  c: {}
}

// Getters 
// 请注意 Getters 写法
const getters = {
  [GET_XXXX_1](state){
    return state.a
  },
  [GET_XXXXXXXXXXX_2](state) {
    return state.b
  },
}

// Actions
// 请注意 Actions 写法
const actions = {
  [XXXX_1](context, data){
    return new Promise((resolve, reject) => {
      // 请使用 Promise 处理 Async     
    })
  },
}

在 Vue 中使用

由于我们对于 Vuex Module 的特别写法,在 .vue 中使用请

Last updated