通过一个简单的例子学会vuex与模块化

├── App.vue
├── components // 组件文件夹
│ ├── tab1.vue
│ ├── tab2.vue
│ ├── tab3.vue
│ └── tab4.vue
├── main.js // vue的主文件入口
├── router // vue-router文件
│ └── index.js
└── store // vuex文件
 ├── action.js // action
 ├── getter.js // getter
 ├── index.js // vuex的主文件
 ├── module // 模块文件
 │ ├── tab2.js
 │ └── tab3.js
 ├── mutation-type.js // mutation常量名文件
 └── mutation.js // mutation

// mutation-type.js

const CHANGE_COUNT = 'CHANGE_COUNT';


export default {
 CHANGE_COUNT
}

// mutation.js

import type from './mutation-type'

let mutations = {
 [type.CHANGE_COUNT](state) {
 state.count++
 }
}

export default mutations

// action.js
import type from './mutation-type'

let actions = {
 [type.CHANGE_COUNT]({ commit }) {
 
 commit(type.CHANGE_COUNT)
 
 }
}

export default actions

// tab1.vue
<template>
 <div>
 <p>这是tab1的内容</p>
 <em @click="add">{{count}}</em>
 <p>getter:{{NewArr}}</p>
 </div>
</template>


<script>
import { mapActions, mapGetters } from "vuex";
import type from "../store/mutation-type";
export default {
 computed: {
 ...mapGetters([
 'NewArr'
 ]),
 count: function() {
 return this.$store.state.count;
 },
 },
 methods: {
 ...mapActions({
 CHANGE_COUNT: type.CHANGE_COUNT
 }),
 add: function() {
 this.CHANGE_COUNT(type.CHANGE_COUNT);
 }
 }
};
</script>

<style lang="" scoped>

</style>

import Vuex from 'vuex'
import Vue from 'vue'
import actions from './action'
import mutations from './mutation'
import getters from './getter'
import tab2 from './module/tab2'
import tab3 from './module/tab3'

Vue.use(Vuex)

let state = {
 count: 1,
 arr:[]
}


let store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions,
 modules:{
 tab2,tab3
 }
 
})

export default store

<em @click="CHANGE_COUNT">{{count}}</em>

// module/tab2.js
const tab2 = {
 state: {
 name:`这是tab2模块的内容`
 },
 mutations:{
 change2(state){
  state.name = `我修改了tab2模块的内容`
 }
 },
 getters:{
 name(state,getters,rootState){
  console.log(rootState)
  return state.name + ',使用getters修改'
 }
 }
}

export default tab2;

// tab2.vue
<template>
 <div>
 <p>这是tab2的内容</p>
 <strong @click="change">点击使用muttion修改模块tab2的内容：{{info}}</strong>
 <h4>{{newInfo}}</h4>
 </div>
</template>


<script>
export default {
 mounted() {
 // console.log(this.$store.commit('change2'))
 },
 computed: {
 info: function() {
 return this.$store.state.tab2.name;
 },
 newInfo(){
 return this.$store.getters.name;
 }
 },
 methods: {
 change() {
 this.$store.commit('change2')
 }
 }
};
</script>

<style lang="" scoped>

</style>

this.$store.steta.tab2(模块名).name