Vuex模块化

目录

配置

在src目录下新建store文件夹，内部新建add.js、cut.js和index.js

add.js：其中主体的配置项与之前的这篇文章：Vuex的使用
差不多，这里主要多了一个namespaced，这个翻译成中文就是命名空间，主要是用来区分各个模块的

export default {
    //开启命名空间
    namespaced:true,
    actions:{
        add(ctx,value){
            //交给mutations处理
            ctx.commit("ADD",value)
        }
    },
    mutations:{
        ADD(state,value){
            //操作数据
            state.num += value
        }
    },
    state:{
        num:0
    },
    getters:{
        bigNum(state){
            return state.num * 10
        }
    }
}

cut.js：整体与add.js差不多

export default {
    //开启命名空间
    namespaced:true,
    actions:{
        cut(ctx,value){
            //交给mutations处理
            ctx.commit("CUT",value)
        }
    },
    mutations:{
        CUT(state,value){
            //操作数据
            state.num -= value
        }
    },
    state:{
        num:0
    },
    getters:{
        bigNum(state){
            return state.num * 10
        }
    }
}

然后在index.js中引入add.js和cut.js，其中addModule和cutModule就是用来区分模块的命名

import Vue from "vue"
import Vuex from "vuex"
import addOptions from "./add.js"
import cutOptions from "./cut.js"

Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        addModule:addOptions,
        cutModule:cutOptions
    }
})

使用

使用的话我们依然使用映射来操作，但是之前的文章（Vuex的getters、mapGetters、mapState、mapActions与mapMutations的使用）不同，这次需要加上配置的名字来区分，如下：
Add.vue

<template>
    <div>
        <h1>当前数值：{{num}}</h1>
        <h1>当前数值乘以十：{{bigNum}}</h1>
        <button @click="add(1)">点击加</button>
    </div>
</template>

<script>
    import {mapActions,mapState,mapGetters} from "vuex"
    export default{
        computed:{
            ...mapState("addModule",['num']),
            ...mapGetters("addModule",['bigNum'])
        },
        methods:{
            ...mapActions("addModule",['add'])
        }
    }
</script>

<style>
</style>

Cut.vue

<template>
    <div>
        <h1>当前数值：{{num}}</h1>
        <h1>当前数值乘以十：{{bigNum}}</h1>
        <button @click="cut(1)">点击减</button>
    </div>
</template>

<script>
    import {mapActions,mapState,mapGetters} from "vuex"
    export default{
        computed:{
            ...mapState("cutModule",['num']),
            ...mapGetters("cutModule",['bigNum'])
        },
        methods:{
            ...mapActions("cutModule",['cut'])
        }
    }
</script>

<style>
</style>

然后在App.vue 引入使用

<template>
  <div>
    <Add></Add>
    <hr/>
    <Cut></Cut>
  </div>
</template>

<script>
import Add from './components/Add.vue'
import Cut from './components/Cut.vue'
export default {
  name: 'app',
  components: {
    Add,
    Cut
  }
}
</script>

<style>
</style>

运行效果如下