vuex module总结

// 创建store文件夹 然后在store文件夹下创建对应的js文件
//  在该js文件中引入对应的依赖文件
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from 'moduleA所在的文件的地址'
import moduleB from 'moduleB所在的文件的地址'
Vue.use(Vuex)
const store = new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {moduleA}
})
export default store
// 在main.js中引入store
import store from '对应的主js文件地址'
new Vue({store
})
// 创建模块a的文件 例如该项目中的moduleA.js
const moduleA = {state: {data1: {}},getters: {getData(state, getters, rootState, rootGetters) {// state 本模块的state// getters 本模块的getters// rootState 所有模块的数据集合// rootGetters 所有模块的getters的集合}},mutations: {mutationFun(state, data) {// state 本模块的state// data 调用函数时传递的参数}},actions: {actionFun({dispatch, commit, getters, state, rootGetters, rootState}) {// actions中的函数有一个默认参数 context 这个函数可以进行解构// context： {dispatch: function() , commit:function(), getters: function(), state: state, rootGetters: function(), rootState}// dispatch调用actions函数的方法// commit 提交mutations函数的方法// getters 是本模块的getter函数// state 本模块的state数据// rootGetters 所有模块的getters属性集合// rootState 所有模块的数据集合}}
}
// 创建模块b的文件 例如 该项目中的 moduleB.js
const moduleB = {state: {data2: {}},getters: {getData2() {}},mutations: {},actions: {}
}

用法

在对应的vue文件中

    <template><div>{{moduleA.data1}}{{moduleB.data2}}{{getData}}</div></template><script>import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'export default {name: '',data() {return {}},computed: {...mapState(['moduleA','moduleB']),// 模块之间的getters方法名称不能同名...mapGetters(['getData','getData2'])},created() {// this.$store.commit('函数名', '要传递的参数') 这两种形式的调用和传参的方式叫做载荷// this.$store.dispatch('函数名', '要传递的参数')this.mutationFun('可以传递参数')this.actionFun('可以传递参数')},methods: {...mapMutations(['mutationFun']),...mapActions(['actionFun'])}}</script><style scoped></style>

vuex module总结相关推荐

vuex 中出现[vuex] module namespace not found in mapActions(): money找不到的报错
使用辅助函数解释小仓库模块的state. vuex 中出现[vuex] module namespace not found in mapActions(): money找不到的报错要在小仓库模块中 ...
Vuex之module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module) ...
VUEX源码学习笔记（第5~6章共6章）
第五章辅助函数在第一章我们曾经说过: VUEX采用的是典型的IIFE(立即执行函数表达式)模式,当代码被加载(通过<script>或Vue.use())后,VUEX会返回一个对象,这个 ...
学习 vuex 源码整体架构，打造属于自己的状态管理库
前言这是学习源码整体架构第五篇.整体架构这词语好像有点大,姑且就算是源码整体结构吧,主要就是学习是代码整体结构,不深究其他不是主线的具体函数的实现.本篇文章学习的是实际仓库的代码. 其余四篇分别是: ...
Vuex源码阅读分析
Vuex源码阅读分析 Vuex是专为Vue开发的统一状态管理工具.当我们的项目不是很复杂时,一些交互可以通过全局事件总线解决,但是这种观察者模式有些弊端,开发时可能没什么感觉,但是当项目变得复杂,维护 ...
使用vuejs 2.x (不是nuxt) 做个demo: 使用 vuex, router ( store, action , mutation)
使用命令创建项目根据图片提示选择需要的内容,选择vuex router 按空格进行多选 vue create vuex1 cd vuex1 yarn serve 假设,我们有两个页面: " ...
将Feathers客户集成到Vuex
羽毛-vuex (feathers-vuex) feathers-vuex is a first class integration of the Feathers Client and Vuex. ...
vuex 源码整体架构学习
前言这是学习源码整体架构第五篇.整体架构这词语好像有点大,姑且就算是源码整体结构吧,主要就是学习是代码整体结构,不深究其他不是主线的具体函数的实现.本篇文章学习的是实际仓库的代码. 其余四篇分别是: ...
vue技术点（3）—vuex、插槽、自定义指令、vue动画、keep-alive使用、mixin
目录 1,vuex 1.1,vuex介绍 1.2,vuex的各个模块 1.3,Vuex实例应用 2,组件插槽 2.1,具名插槽 2.2,插槽作用域 3,自定义指令 4,vue动画 4.1,vue过渡动 ...

vuex module总结

vuex module总结

vuex module总结相关推荐

最新文章

热门文章