vuex随记

本文介绍了如何在Vue.js应用中使用Vuex进行模块化管理,通过require.context动态加载模块,并展示了如何在actions中进行异步数据操作。在main.js中挂载store,同时提供了两种不同的数据存储方式,包括通过dispatch调用actions进行异步存值和直接使用commit同步存值。
摘要由CSDN通过智能技术生成

1.下载vue

2.引入封装

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3.挂载在main.js

在这里插入图片描述

方式一:异步方法actions内提交异步

methods: {
    setBaseData() {
      if (this.userInfo.schoolId) this.$store.dispatch('base/queBaseData', this.userInfo)
    }
  }

在这里插入图片描述

2.调用异步存值

在这里插入图片描述

在这里插入图片描述

方式二:commit同步存值

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值