vuex 模块化应用

客官°小女子只卖身不卖艺 2022-09-08 13:51 163阅读 0赞

1.目录结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAd3dmMTIyNQ_size_62_color_FFFFFF_t_70_g_se_x_16][]

2. index.js 文件：

import Vue from 'vue'

import Vuex from 'vuex'

import actions from './actions'

import getters from './getters'

import mutations from './mutations'

import state from './state'

Vue.use(Vuex)

// 创建 store 实例

export default new Vuex.Store(\{

actions,

getters,

state,

mutations

\})

3.state.js 文件：

const state = \{

currentSecActive: 0, //工具二级点击控制

buildingId: "", // 建筑评分建筑id

loadingImport:false, // 重要警情弹框loading

export default state

4.mutations.js 文件：

import state from "./state";

const mutations = \{

//工具栏二级点击

setCurrentSecActive(state, data) \{

state.currentSecActive = data

\},

// 建筑id

setCurrentBuildingId(state, data) \{

state.buildingId = data

\},

// 重要警情loading

setCurrentLoadingImport(state, data) \{

state.loadingImport = data

\},

export default mutations

5. actions.js 文件：

const actions = \{

//工具栏二级点击

setCurrentSecActive(context, data) \{

context.commit('setCurrentSecActive', data)

\},

// 建筑id

setCurrentBuildingId(context, data) \{

context.commit('setCurrentBuildingId', data)

\},

// 重要警情loading

setCurrentLoadingImport(context, data) \{

context.commit('setCurrentLoadingImport', data)

\},

export default actions

6.getters.js 文件

import state from "./state"

const getters = \{

// 工具栏二级点击

getCurrentSecActive: state => \{

return state.currentSecActive

\},

// 获取建筑id

getCurrentBuildingId: state => \{

return state.buildingId

\},

// 重要警情loading

getCurrentLoadingImport: state => \{

return state.loadingImport

\},

export default getters

7. vue 页面应用

import \{ mapActions, mapGetters \} from "vuex";

computed: \{

...mapGetters(\["getCurrentBuild","getShowToolbar"\])

\},

methods: \{

...mapActions(\[

"setCurrentBuild",

"setPublicControl",

\]),

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAd3dmMTIyNQ_size_62_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/08e0b632a5644b2fb5b5fd580e2fa452.png

vuex 模块化应用

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vuex数据状态持久化-vuex-persistedstate

相关 vue3.0 Vuex模块化管理

相关 Vuex持久化存储之vuex-persist

相关 vuex 模块化应用

相关 Vuex 模块化实现待办事项的状态管理

相关 uni-app如何将vuex模块化

相关 Vuex持久化存储之vuex-persist

相关 Vuex状态管理之模块化（精华总结）

相关 vuex的拆分使用——模块化处理

相关 vuex 应用模板