vite3+TS+Vuex用法

最新推荐文章于 2025-04-28 17:15:11 发布

原创最新推荐文章于 2025-04-28 17:15:11 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

Vue3+TS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装并使用Vuex进行状态管理，包括创建store、模块划分、状态和getter设置，以及actions和mutations的实现。重点讲解了第一级和第二级分类模块的配置与数据获取。

安装Vuex

npm install vuex@next --save

初始化

src / store / index.ts

import { createStore } from 'vuex'

import getters from './getters'

import { categoryModule } from './modules/category'

const store = createStore({
  getters,
  modules: {
    categoryModule
  }
})

export default store

modules / state

export interface FirstCategory {
  id: number
  title: string
  pid: number
}

export interface SecondCategory {
  id: number
  title: string
  pid: number
  children: FirstCategory[]
}

export interface CategoryState {
  firstCategories: FirstCategory[]
  secondCategories: SecondCategory[]
}

export const categoryState: CategoryState = {
  firstCategories: [],
  secondCategories: []
}

modules / index.ts

import { Module } from 'vuex'
import { categoryState, CategoryState, FirstCategory, SecondCategory } from './state'
import { findFirstCategory, findSecondCategory } from '@/api/categoryApi'

export const categoryModule: Module<CategoryState, {}> = {
  namespaced: true,
  state: categoryState,
  getters: {
    firstLevel: state => state.firstCategories,
    secondLevel: state => state.secondCategories
  },
  mutations: {
    SET_FIRST_LEVEL(state, payload: FirstCategory[]) {
      state.firstCategories = payload
    },
    SET_SECOND_LEVEL(state, payload: SecondCategory[]) {
      state.secondCategories = payload
    }
  },
  actions: {
    // 获取一级分类数据
    async getFirstLevel({ commit }) {
      const data = await findFirstCategory()
      commit('SET_FIRST_LEVEL', data)
    },
    // 获取二级分类
    async getSecondLevel({ commit }, id: number) {
      const data = await findSecondCategory(id)
      commit('SET_SECOND_LEVEL', data)
    }
  },
}