VUEX封装module

目录结构

store/index.js，配置，以及导入两种方式

import Vue from 'vue'
import Vuex from 'vuex'
import m from './module/m'
import authority from './module/authority'
// 调试方法
import createLogger from 'vuex/dist/logger'// 判断环境
const debug = process.env.NODE_ENV !== 'production'Vue.use(Vuex)export default new Vuex.Store({modules: {m: m,authority: authority},strict: debug,plugins: debug ? [createLogger()] : []
})// store.state.hw // -> hw 的状态
// store.state.m // -> hw 的状态

authority/index.js ，官方版本

export default {// 是否对应 模块名 响应数据namespaced: true,state: {count: 1},mutations: {increment (state) {// 这里的 `state` 对象是模块的局部状态state.count++}},getters: {doubleCount (state) {return state.count * 5},// 对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：sumWithRootCount (state, getters, rootState) {return state.count + rootState.count}},actions: {// 同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：incrementIfOddOnRootSum ({ state, commit, rootState }) {if ((state.count + rootState.count) % 2 === 1) {commit('increment')}}}
}

m/index.js，封装版本

import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'export default {// 是否对应 模块名 响应数据namespaced: true,actions,getters,state,mutations
}

m/action.js

import * as types from './mutation-types'export const incrementIfOddOnRootSum = ({ state, commit, rootState }) => {if ((state.count + rootState.count) % 2 === 1) {commit([types.SET_INCREMENT])}
}

m/getters.js

export const doubleCountm = (state) => {return state.count * 2
}

m/mutation-types.js

export const SET_INCREMENT = 'increment'

m/mutations.js

import * as types from './mutation-types'const mutations = {[types.SET_INCREMENT] (state) {// 这里的 `state` 对象是模块的局部状态state.count++}
}export default mutations

m/state.js

const state = {count: 10
}export default state

使用：Home.vue

<template><div class="home"><h1>m：{{this.orderListAlias}}</h1><h1>authority：{{this.orderListAlias1}}</h1><img alt="Vue logo" src="../common/images/logo.png"><HelloWorld msg="修改尝试"/></div>
</template><script>
// @ is an alias to /src
import HelloWorld from 'src/components/HelloWorld.vue'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'export default {name: 'home',components: {HelloWorld},computed: {// 模块名（嵌套层级要写清楚）例如：m// 获取state值...mapState('m', {orderListAlias: state => state.count}),...mapState('authority', {orderListAlias1: state => state.count}),// 通过getters获取值...mapGetters('m', ['doubleCountm']),...mapGetters('authority', ['doubleCount'])},methods: {...mapMutations('m', ['increment' // 将 `this.increment()` 映射为 `this.$store.commit('increment')`]),...mapMutations('authority', {incrementa: 'increment'}),...mapActions('m', ['incrementIfOddOnRootSum' // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`]),...mapActions('authority', {incrementIfOddOnRootSuma: 'incrementIfOddOnRootSum'})},mounted () {console.log(this.orderListAlias)console.log(this.orderListAlias1)console.log(this.doubleCount)console.log(this.doubleCountm)this.increment()console.log(this.orderListAlias)this.incrementa()console.log(this.orderListAlias1)this.incrementIfOddOnRootSum()console.log(this.orderListAlias)this.incrementIfOddOnRootSuma()console.log(this.orderListAlias1)}
}
</script>

VUEX封装module相关推荐

vuex结合php,Vuex模块化(module)实例详解
本文主要和大家介绍Vuex 模块化(module),小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 一.为什么需要模块化前面我们讲到的例子都在一个状态树里进行,当一个项目比较 ...
Vuex之module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module) ...
Vue 教程第十七篇—— Vuex 之 module
module 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块( ...
[Vuex系列] - Module的用法（终篇）
于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿.为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每 ...
Vuex源码学习（五）加工后的module
没有看过moduleCollection那可不行!Vuex源码学习(四)module与moduleCollection 感谢提出代码块和截图建议的小伙伴代码块和截图的区别: 代码块部分希望大家按照我 ...
Vue使用Vuex一步步封装并使用store
文章目录一.安装Vuex依赖二.一步步封装store 1. main.js中全局引入store仓库(下一步创建) 2. this.$store 3. this.$store.state 4. th ...
层次和约束：项目中使用vuex的3条优化方案
问题描述使用vuex的store的过程中,发现了一些不是很优雅的地方: store层module太多,找state.getter.mutation.action对应的module比较慢. 组件里面m ...
vuex 源码分析_Vuex框架原理与源码分析
Vuex是一个专为Vue服务,用于管理页面数据状态.提供统一数据操作的生态系统.它集中于MVC模式中的Model层,规定所有的数据操作必须通过 action - mutation - state ch ...
Vuex框架原理与源码分析
Vuex是一个专为Vue服务,用于管理页面数据状态.提供统一数据操作的生态系统.它集中于MVC模式中的Model层,规定所有的数据操作必须通过 action - mutation - state ch ...

VUEX封装module

VUEX封装module

目录结构

store/index.js，配置，以及导入两种方式

authority/index.js ，官方版本

m/index.js，封装版本

m/action.js

m/getters.js

m/mutation-types.js

m/mutations.js

m/state.js

使用：Home.vue

VUEX封装module相关推荐

最新文章

热门文章