SeeDAO OS
  • 👋欢迎 Welcome
  • ⭐项目简介 Overview
    • 💡什么是 SeeDAO OS ?
    • 🕴️托管与客制化服务
  • 📘使用者指南 User Guide
    • ⚡快速开始
      • 安装部署
      • 环境设置
      • 疑难排解
    • ☁️SeeDAO OS API
      • Error Codes
      • Event
      • User
    • 🪄客户端 SDK (node.js)
      • User
  • 📙知识库 Knowledge Base
    • 🏗️技术架构
      • 设计哲学
      • 技术栈
      • 前端 - Vue3
        • 国际化
        • 状态管理 Vuex
        • 数据埋点 Google Analytic
      • 后端 - Express (Nodejs)
        • MRCS 架构
        • 设置管理
        • FlureeDB 交互
        • 日志管理 - pino
        • 封装 NPM 包
      • 数据库 - FlureeDB (GraphQL)
      • 链上相关操作
        • DAO 标准 - DAO*
    • 🛠️功能模块
      • 成员 User
        • 社交账户 Auth
      • 积分 Point
      • 任务 Task
        • 评价 Review
      • 提案 Proposal
        • 投票 Poll & Vote
      • 预算 Budget
        • 链上记录 Transaction
        • 资产 Asset
        • 代币 Token
      • 悬赏 Bounty
      • 公会 Guild
      • 项目 Project
      • 通知 Notification
        • 短信 ShortMessage
      • 线索 Lead
        • 渠道 Channel
      • 备份 Backup
        • 档案 File
        • 链接 Link
    • 💪第三方支持
      • SubDID (.bit)
      • IM (Sending.Me)
      • SBT (Ensoul)
      • 链上 ZK 存储 (zCloak)
    • 🕹️游戏化设计
      • NPC — 对话式副本任务
      • 技能树 — 成长路径设计
      • 叠Buff — SBT 报酬加成
    • 🔌插件开发
      • 前端 OS Widget
      • 独立插件
  • 🙋协作贡献 Collaboration
    • 🤟加入项目
    • 📋项目看板
    • 📐协作规范
      • 产权与开源条款
        • SeeDAO OS 贡献者协议 (SCA)
      • 项目激励与要求
      • 反馈回报
      • 项目推广
      • 术语词汇表
    • 🤠非技术贡献者
      • 游戏化小组
      • 自动化小组
    • 🤓技术贡献者
      • 主干开发
      • 代码规范
Powered by GitBook
On this page
  • 建立新的状态
  • 在 Vue 中使用
  1. 知识库 Knowledge Base
  2. 技术架构
  3. 前端 - Vue3

状态管理 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 中使用请

Previous国际化Next数据埋点 Google Analytic

Last updated 2 years ago

📙
🏗️