05-复杂项目中vuex使用modules

1-先新建两个组件，part3和part4,具体代码如下：
part3:

<template>
  <div>
      <h1>count1:{{count}}</h1>
      <button @click="setCount(4)">增加4</button>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

import {mapState,mapMutations } from 'vuex'
export default {
  name:'mypart3',
 
  
  // 计算属性，会监听依赖属性值随之变化
  computed: {

      ...mapState('count1',{
          count:(state)=>state.count
      })

  },
 
  // 方法集合
  methods: {
      ...mapMutations('count1',['setCount'])
    
  },
  
}
</script>

<style lang='stylus' scoped>
  
</style>

part4:

<template>
  <div>
      <h1>count2:{{count}}</h1>
      <button @click="setCount(8)">增加8</button>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import {mapState,mapMutations} from 'vuex'

export default {
   name:'mypart4',
 
  // 计算属性，会监听依赖属性值随之变化
  computed: {

      ...mapState('count2',{
          count:(state)=>state.count
      })

  },

  methods: {
      ...mapMutations('count2',['setCount'])
    
  },

  
}
</script>

<style lang='stylus' scoped>
  
</style>

2-新建vuexl两个模块count1和count2,项目结构如下；

state.js:

export default {
    count: 0
}

mutations.js:

export default {
    setCount(state, num) {
        state.count += num;

    }
}

index.js:

import state from "./state";
import mutations from "./mutations";

export default {
    namespaced: true,
    state,
    mutations
}

3-在vuex store-index.js引入模块count1 和count2

import Vue from 'vue'
import Vuex from 'vuex'

// import axios from 'axios'

import count1 from './count1'
import count2 from './count2'


Vue.use(Vuex)

export default new Vuex.Store({
   
    //处理比较大的项目处理
    modules: {
        count1,
        count2
    }
})

 

4-在app.vue中引用part3和part4

<template>
  <div id="app">
    <my-part3/>
     <my-part4/>
  </div>
</template>
<script>
import myPart3 from '@/components/part3'
import myPart4 from '@/components/part4'
export default {
  name:'App',
  components: {
   myPart3,
   myPart4
  },
  data () {
    return {
     
    }
  },
  methods: {
    
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

5-效果如下：

 

count1:每一次增加4

count2:每一次增加8

互相不影响