vuex模块化引用

项目结构

1.modules>app.js

const state = {
    textOne: '123'
}

const mutations = {
    ASSIGNMNT_TEXTONE: (state, data) => {
        state.textOne = data
    }
}

const actions = {
    assignmentTextOne({
        commit
    }, data) {
        commit('ASSIGNMNT_TEXTONE', data)
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

2.modules>about.js

const state = {
    textTwo: 456
}

const mutations = {
    ASSIGNMNT_TEXTTWO: (state, data) => {
        state.textTwo = data
    }
}

const actions = {
    assignmentText({
        commit
    }, data) {
        commit('ASSIGNMNT_TEXTTWO', data)
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

3.getters.js

const getters = {
    textOne: state => state.app.textOne,
    textTwo: state => state.about.textTwo
}
export default getters

4.index.js

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) => {
  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

5.页面调用加修改store里的值

<template>
    <div class="home">
        {{textOne}}
        <el-button type="primary" @click="changeStore">改变vuex</el-button>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    data() {
        return {

        };
    },
    computed: {
        ...mapGetters(['textOne', 'textTwo'])
    },
    mounted() {
    },
    methods: {
        changeStore() {
            this.$store.dispatch('app/assignmentTextOne', 456);
        }
    }
}
</script>