Vue--插件--Vuex

ゝ一纸荒年。 2022-12-28 12:33 190阅读 0赞

原文网址：[Vue--插件--Vuex\_IT利刃出鞘的博客-CSDN博客][Vue--_--Vuex_IT_-CSDN]

# 其他网址 #

> [VueJS中学习使用Vuex详解\_个人文章 - SegmentFault 思否][VueJS_Vuex_ - SegmentFault]  
> [Vuex入门教程][Vuex]
> 
> [Vue状态管理vuex - 小火柴的蓝色理想 - 博客园][Vue_vuex - _ -]
> 
> [官网文档][Link 1]
> 
> [API vuex-store][]

# 入门实例 #

需求：计数器：兄弟组件（ChildOne.vue）点击按钮后可以增减父组件(CompA)和兄弟组件（ChildTwo.vue）的数字。

## 安装Vuex并引入 ##

**1.安装vuex**

> 在工程目录下执行：npm install vuex

**2.编写vuex的store**

> 创建目录store，在其下边创建CounterStore.js，内容如下：
> 
>     import Vue from 'vue';
>     import Vuex from 'vuex';
>     
>     Vue.use(Vuex);
>     const couterStore = new Vuex.Store(
>       {
>         state: {
>           count1: 0,
>           count2: 0,
>         },
>         mutations: {
>           increment1(state) {
>             state.count1++;
>           },
>           decrement1(state) {
>             state.count1--;
>           },
>           increment2: state => state.count2++,
>           decrement2: state => state.count2--,
>         }
>       }
>     );
>     
>     export default couterStore;

**3.main.js引入CounterStore.js**

>     // The Vue build version to load with the `import` command
>     // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
>     import Vue from 'vue'
>     import App from './App'
>     import router from './router'
>     import CouterStore from './store/CounterStore'
>     
>     Vue.config.productionTip = false
>     
>     /* eslint-disable no-new */
>     new Vue({
>       el: '#app',
>       router,
>       store: CouterStore,
>       components: { App },
>       template: '<App/>'
>     })
> 
> 按照js语法，key与value重名时可以简写：（很多教程这么写）
> 
>     // The Vue build version to load with the `import` command
>     // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
>     import Vue from 'vue'
>     import App from './App'
>     import router from './router'
>     import store from './store/CounterStore'
>     
>     Vue.config.productionTip = false
>     
>     /* eslint-disable no-new */
>     new Vue({
>       el: '#app',
>       router,
>       store,
>       components: { App },
>       template: '<App/>'
>     })

## 父子组件 ##

components/CompA.vue //父组件

>     <template>
>       <div class="compA">
>         <h1>compA</h1>
>         compA收到的事件内容：{
>         {msg}}<hr>
>         <child-one></child-one><hr>
>         <child-two></child-two>
>     
>       </div>
>     </template>
>     
>     <script>
>     import ChildOne from "@/components/ChildOne";
>     import ChildTwo from "@/components/ChildTwo";
>     
>     export default {
>       components: {ChildOne, ChildTwo},
>       data() {
>         return {
>         }
>       },
>       computed:{
>         msg() {
>           return this.$store.state.count1;
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

**components/ChildOne.vue** //兄弟节点1 用于发送事件

>     <template>
>       <div class="childOne">
>         <h1>childOne</h1>
>         <button @click="increment1">增加：父组件（CompA）</button>
>         <button @click="decrement1">减少：父组件（CompA）</button><br><br>
>         <button @click="increment2">增加：兄弟组件（ChildTwo）</button>
>         <button @click="decrement2">减少：兄弟组件（ChildTwo）</button>
>       </div>
>     </template>
>     
>     <script>
>     
>     export default {
>       data() {
>         return {
>           count1: 0,
>           count2: 0,
>         }
>       },
>       methods:{
>         increment1() {
>           this.$store.commit('increment1')
>         },
>         decrement1() {
>           this.$store.commit('decrement1')
>         },
>         increment2() {
>           this.$store.commit('increment2')
>         },
>         decrement2() {
>           this.$store.commit('decrement2')
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>

**components/ChildTwo.vue** //兄弟节点2 接收事件

>     <template>
>       <div class="childTwo">
>         <h1>childTwo</h1>
>         childTwo收到的事件内容：{
>         {msg}}
>       </div>
>     </template>
>     
>     <script>
>     
>     export default {
>       data() {
>         return {
>         }
>       },
>       computed:{
>         msg() {
>           return this.$store.state.count2;
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

## 测试 ##

> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![20201217195933843.gif][]

# mapXxx #

**其他网址**

> [理解Vuex的辅助函数mapState, mapActions, mapMutations用法 - 龙恩0707 - 博客园][Vuex_mapState_ mapActions_ mapMutations_ - _0707 -]

## 公共代码 ##

需求：点击一个组件按钮，增加另一个组件的数量。

**router/index.js**

>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import CompA from "@/components/CompA";
>     
>     Vue.use(Router)
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/compA',
>           name: 'compA',
>           component: CompA,
>         }
>       ],
>     })

**store/CounterStore.js** //计数器store

>     import Vue from 'vue';
>     import Vuex from 'vuex';
>     
>     Vue.use(Vuex);
>     const couterStore = new Vuex.Store(
>       {
>         state: {
>           count1: 0
>         },
>         mutations: {
>           incr1(state) {
>             state.count1++;
>           },
>           decr1(state) {
>             state.count1--;
>           },
>         },
>       }
>     );
>     
>     export default couterStore;

**components/CompA.vue**

> 因为vue是单页面应用，所以用此组件引入其余两个组件。

>     <template>
>       <div class="compA">
>         <child-one></child-one>
>         <hr>
>         <child-two></child-two>
>     
>       </div>
>     </template>
>     
>     <script>
>     import ChildOne from "@/components/ChildOne";
>     import ChildTwo from "@/components/ChildTwo";
>     
>     export default {
>       components: {ChildOne, ChildTwo},
>       data() {
>         return {
>         }
>       },
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

**components/ChildOne.vue** //发送事件

>     <template>
>       <div class="childOne">
>         <h1>childOne</h1>
>         <button @click="incr1">增加：兄弟组件（ChildTwo）</button>
>         <button @click="decr1">减少：兄弟组件（ChildTwo）</button>
>       </div>
>     </template>
>     
>     <script>
>     
>     export default {
>       data() {
>         return {
>           payload: {
>             amount: 5
>           }
>         }
>       },
>       methods:{
>         incr1() {
>           this.$store.commit('incr1')
>         },
>         decr1() {
>           this.$store.commit('decr1')
>         },
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>

**components/ChildTwo.vue** //接收事件

>     <template>
>       <div class="childTwo">
>         <h1>childTwo</h1>
>         收到的事件内容：{
>         {msg}}
>       </div>
>     </template>
>     
>     <script>
>     
>     export default {
>       data() {
>         return {
>         }
>       },
>       computed:{
>         msg() {
>           return this.$store.state.count1;
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

**测试**

> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![20201219113438958.gif][]

## mapState ##

**简介**

> 当一个组件需要获取多个状态时，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，可以使用mapState辅助函数帮助生成计算属性
> 
>     // 在单独构建的版本中辅助函数为 Vuex.mapState
>     import { mapState } from 'vuex'
>     
>     export default {
>       // ...
>       computed: mapState({
>         // 箭头函数可使代码更简练
>         count: state => state.count,
>     
>         // 传字符串参数 'count' 等同于 `state => state.count`
>         // 下边这行等价于： countAlias: state => state.count
>         countAlias: 'count',
>         
>     
>         // 为了能够使用 `this` 获取局部状态，必须使用常规函数
>         countPlusLocalState (state) {
>           return state.count + this.localCount
>         }
>       })
>     }
> 
> 当映射的计算属性的名称与 state 的子节点名称相同时，也可以给 mapState 传一个字符串数组
> 
>     computed: mapState([
>       // 映射 this.count 为 store.state.count
>       'count'
>     ])
>     
>     //等价于
>     //computed: {
>     //  count(){
>     //    return this.$store.state.count
>     //  }
>     //}

**改造“公共代码”**

>     <template>
>       <div class="childTwo">
>         <h1>childTwo</h1>
>         收到的事件内容：{
>         {msg}} <br>
>         count1Alias:   {
>         {count1Alias}} <br>
>         事件加本地值：  {
>         {countPlusLocalState}} <br>
>       </div>
>     </template>
>     
>     <script>
>     import {mapState} from 'vuex'
>     export default {
>       data() {
>         return {
>           localCount: 5,
>           cnt: 0
>         }
>       },
>       // 原来的写法
>       // computed:{
>       //   msg() {
>       //     return this.$store.state.count1;
>       //   }
>       // }
>       computed: mapState({
>         msg: state => state.count1,
>         //上边这行也可以这么写：
>         //msg: 'count1'
>         count1Alias: 'count1',
>         countPlusLocalState(state) {
>           return this.msg + this.localCount
>         }
>       })
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

**测试**

> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![2020121912230843.gif][]

## mapGetters ##

**简介**

> mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
> 
>     import { mapGetters } from 'vuex'
>     
>     export default {
>       // ...
>       computed: {
>       // 使用对象展开运算符将 getter 混入 computed 对象中
>         ...mapGetters([
>           'doneTodosCount',
>           'anotherGetter',
>           // ...
>         ])
>       }
>     }
> 
> 如果想将一个 getter 属性另取一个名字，使用对象形式：
> 
>     mapGetters({
>       // 映射 `this.doneCount` 为 `store.getters.doneTodosCount`
>       doneCount: 'doneTodosCount'
>     })

**改写“公共代码”**

> store/CounterStore.js
> 
>     import Vue from 'vue';
>     import Vuex from 'vuex';
>     
>     Vue.use(Vuex);
>     const couterStore = new Vuex.Store(
>       {
>         state: {
>           count1: 0
>         },
>         mutations: {
>           incr1(state) {
>             state.count1++;
>           },
>           decr1(state) {
>             state.count1--;
>           },
>         },
>         getters: {
>           doubleCount1: state => {
>             return state.count1 * 2;
>           }
>         }
>       }
>     );
>     
>     export default couterStore;
> 
> components/ChildTwo.vue
> 
>     <template>
>       <div class="childTwo">
>         <h1>childTwo</h1>
>         收到的事件内容：{
>         {msg}} <br>
>         doubleCount1: {
>         {doubleCount1}}
>       </div>
>     </template>
>     
>     <script>
>     import {mapGetters} from 'vuex'
>     export default {
>       data() {
>         return {
>         }
>       },
>       computed:{
>         msg() {
>           return this.$store.state.count1;
>         },
>         ...mapGetters(['doubleCount1'])
>         // 也就是：
>         // doubleCount1() {
>         //   return this.$store.getters.doubleCount1;
>         // }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>
> 
> **测试**
> 
> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![20201219193440636.gif][]

## mapMutations ##

**简介**

> 可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）
> 
>     import { mapMutations } from 'vuex'
>     
>     export default {
>       // ...
>       methods: {
>         ...mapMutations([
>           'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
>     
>           // `mapMutations` 也支持载荷：
>           'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
>         ]),
>         ...mapMutations({
>           add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
>         })
>       }
>     }

**改造“公共代码”**

>     <template>
>       <div class="childOne">
>         <h1>childOne</h1>
>         <button @click="incr1">增加：兄弟组件（ChildTwo）</button>
>         <button @click="decr1">减少：兄弟组件（ChildTwo）</button>
>       </div>
>     </template>
>     
>     <script>
>     import {mapMutations} from 'vuex'
>     export default {
>       data() {
>         return {
>           payload: {
>             amount: 5
>           }
>         }
>       },
>       methods: {
>         // 原来的写法
>         // incr1() {
>         //   this.$store.commit('incr1')
>         // },
>         // decr1() {
>         //   this.$store.commit('decr1')
>         // },
>         ...mapMutations(['incr1', 'decr1'])
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> **测试**
> 
> 访问： [http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![20201219140108159.gif][]

**使用别名映射**

>     <template>
>       <div class="childOne">
>         <h1>childOne</h1>
>         <button @click="incrAlias">增加：兄弟组件（ChildTwo）</button>
>         <button @click="decrAlias">减少：兄弟组件（ChildTwo）</button>
>       </div>
>     </template>
>     
>     <script>
>     import {mapMutations} from 'vuex'
>     export default {
>       data() {
>         return {
>         }
>       },
>       methods: {
>         ...mapMutations({incrAlias: 'incr1', decrAlias: 'decr1'})
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> **测试**
> 
> 访问： [http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![20201219140108159.gif][]

**数组与别名同时使用**

>     <template>
>       <div class="childOne">
>         <h1>childOne</h1>
>         <button @click="incr1">增加：兄弟组件（ChildTwo）</button>
>         <button @click="decrAlias">减少：兄弟组件（ChildTwo）</button>
>       </div>
>     </template>
>     
>     <script>
>     import {mapMutations} from 'vuex'
>     export default {
>       data() {
>         return {
>         }
>       },
>       methods: {
>         ...mapMutations({...mapMutations(['incr1']), ...{decrAlias: 'decr1'}})
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> **测试**
> 
> 访问： [http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![20201219140108159.gif][]

## mapActions ##

**简介**

> 在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用。
> 
>     import { mapActions } from 'vuex'
>     
>     export default {
>       // ...
>       methods: {
>         ...mapActions([
>           'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
>     
>           // `mapActions` 也支持载荷：
>           'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
>         ]),
>         ...mapActions({
>           add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
>         })
>       }
>     }

**改写“公共代码”**

> **store/CounterStore.js**
> 
>     import Vue from 'vue';
>     import Vuex from 'vuex';
>     
>     Vue.use(Vuex);
>     const couterStore = new Vuex.Store(
>       {
>         state: {
>           count1: 0
>         },
>         mutations: {
>           incr1(state) {
>             state.count1++;
>           },
>           decr1(state) {
>             state.count1--;
>           },
>         },
>         actions: {
>           incr1Async(context) {
>             setTimeout(() => {
>                 context.commit('incr1')
>               }, 1000)
>           },
>           decr1Async(context) {
>             setTimeout(() => {
>               context.commit('decr1')
>             }, 1000)
>           }
>         }
>       }
>     );
>     
>     export default couterStore;
> 
> **components/ChildOne.vue**
> 
>     <template>
>       <div class="childOne">
>         <h1>childOne</h1>
>         <button @click="incr1">增加：兄弟组件（ChildTwo）</button>
>         <button @click="decr1">减少：兄弟组件（ChildTwo）</button>
>         <button @click="incr1Async">异步增加：兄弟组件（ChildTwo）</button>
>         <button @click="decr1Async">异步减少：兄弟组件（ChildTwo）</button>
>       </div>
>     </template>
>     
>     <script>
>     import {mapActions} from 'vuex'
>     export default {
>       data() {
>         return {
>         }
>       },
>       methods: {
>         incr1() {
>           this.$store.commit('incr1');
>         },
>         decr1() {
>           this.$store.commit('decr1');
>         },
>         ...mapActions(['incr1Async', 'decr1Async']),
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>

# module #

**其他网址**

> [Vue状态管理vuex - 小火柴的蓝色理想 - 博客园][Vue_vuex - _ - 1]  
> [Vuex实践（中）-多module中的state、mutations、actions和getters - 小土豆biubiubiu - 博客园][Vuex_-_module_state_mutations_actions_getters - _biubiubiu -]

## **同名问题** ##

**简介**

> 如果不使用命名空间，且顶层的store和子store有同名项，情况见下方：
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td><strong>同名项</strong></td> 
>    <td><strong>访问方式</strong></td> 
>    <td style="width:590px;"><strong>访问结果</strong></td> 
>   </tr> 
>   <tr> 
>    <td><strong>state</strong></td> 
>    <td>this.$store.state.xxx</td> 
>    <td style="width:590px;">访问到的是顶层的。</td> 
>   </tr> 
>   <tr> 
>    <td><strong>mutations</strong></td> 
>    <td>this.$store.commit('xxx')</td> 
>    <td style="width:590px;">先执行顶层，后执行所有子module。</td> 
>   </tr> 
>   <tr> 
>    <td><strong>getters</strong></td> 
>    <td>this.$store.getters.xxx;</td> 
>    <td style="width:590px;"> <p>访问页面先报错（不影响运行）：[vuex] duplicate getter key: xxx</p> <p>访问到的是顶层的。</p> </td> 
>   </tr> 
>   <tr> 
>    <td><strong>actions</strong></td> 
>    <td>this.$store.dispatch('xxx')</td> 
>    <td style="width:590px;">访问到的是顶层的。</td> 
>   </tr> 
>  </tbody> 
> </table>

**实例**

> 需求：计数器
> 
> router/index.js
> 
>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import CompA from "@/components/CompA";
>     
>     Vue.use(Router)
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/compA',
>           name: 'compA',
>           component: CompA,
>         }
>       ],
>     })
> 
> store/CouterStore.js
> 
>     import Vue from 'vue';
>     import Vuex from 'vuex';
>     
>     Vue.use(Vuex);
>     import counter1 from "@/store/counter/Counter1";
>     import counter2 from "@/store/counter/Counter2";
>     
>     const couterStore = new Vuex.Store({
>         modules: {
>           cnt1: counter1,
>           cnt2: counter2
>         },
>         state: {count: 0},
>         mutations: {
>           incr(state) {
>             console.log('mutation:CouterStore incr')
>             state.count++
>           },
>           decr(state) {
>             state.count--
>           }
>         },
>     
>         getters: {
>           doubleCount(state) {
>             return state.count * 2
>           }
>         },
>     
>         actions: {
>           incrAsync(context) {
>             console.log('action:CouterStore incrAsync');
>             setTimeout(() => {context.commit('incr')}, 1000)
>           }
>         }
>       }
>     );
>     
>     export default couterStore;
> 
> store/couter/Counter1.js
> 
>     const counter1 = {
>       state: {count: 1},
>       mutations: {
>         incr(state) {
>           // 这里的 `state` 对象是模块的局部状态
>           console.log('mutation:Couter1 incr')
>           state.count++
>         },
>         decr(state) {
>           // 这里的 `state` 对象是模块的局部状态
>           state.count--
>         }
>       },
>     
>       getters: {
>         doubleCount(state) {
>           console.log('getter:Couter1 doubleCount')
>           return state.count * 3
>         }
>       },
>       actions: {
>         incrAsync(context) {
>           console.log('action:Couter1 incrAsync');
>           setTimeout(() => { context.commit('incr')}, 1000)
>         }
>       }
>     }
>     export default counter1;
> 
> store/couter/Counter2.js
> 
>     const counter2 = {
>       state: {count: 2},
>       mutations: {
>         incr(state) {
>           // 这里的 `state` 对象是模块的局部状态
>           console.log('mutation:Couter2 incr')
>     
>           state.count++
>         },
>         decr(state) {
>           // 这里的 `state` 对象是模块的局部状态
>           state.count--
>         }
>       },
>     
>       getters: {
>         doubleCount(state) {
>           console.log('getter:Couter2 doubleCount')
>           return state.count * 4
>         }
>       },
>       actions: {
>         incrAsync(context) {
>           console.log('action:Couter2 incrAsync');
>           setTimeout(()=> {context.commit('incr')}, 1000)
>         }
>       }
>     }
>     export default counter2;
> 
> components/CompA.vue
> 
>     <template>
>       <div class="compA">
>         <child-one></child-one>
>         <hr>
>         <child-two></child-two>
>       </div>
>     </template>
>     
>     <script>
>     import ChildOne from "@/components/ChildOne";
>     import ChildTwo from "@/components/ChildTwo";
>     
>     export default {
>       components: {ChildOne, ChildTwo},
>       data() {
>         return {
>         }
>       },
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> components/ChildOne.vue
> 
>     <template>
>       <div class="childOne">
>         <h1>childOne</h1>
>         <button @click="incr">增加：兄弟组件（ChildTwo）</button><br><br>
>         <button @click="decr">减少：兄弟组件（ChildTwo）</button><br><br>
>         <button @click="incrAsync">异步增加：兄弟组件（ChildTwo）</button>
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       data() {
>         return {
>         }
>       },
>       methods: {
>         incr() {
>           this.$store.commit('incr')
>         },
>         decr() {
>           this.$store.commit('decr');
>         },
>         incrAsync() {
>           this.$store.dispatch('incrAsync');
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> components/ChildTwo.vue
> 
>     <template>
>       <div class="childTwo">
>         <h1>childTwo</h1>
>         state.count：{
>         {msg}} <br>
>         getters.doubleCount: {
>         {doubleCount}}
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       data() {
>         return {
>         }
>       },
>       computed:{
>         msg() {
>           return this.$store.state.count;
>         },
>         doubleCount() {
>           return this.$store.getters.doubleCount;
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> **测试**
> 
> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![20201219233042492.gif][]

## 命名空间 ##

**简介**

> 命名空间可解决上边“重名问题”。用法如下
> 
>  *  模块中添加一个配置namespaced:true
>  *  触发方法： $store.commit('模块名/方法') $store.dispatch('模块名/方法')  
>     //当然，如果是顶层store，$store.commit('方法') 即可。
>  *  访问方法：$store.state.模块名.state成员 $store.getters\['模块名/getters成员'\]

**实例**

> 需求：计数器。在本处为了区分执行的方法，把state的值及mutation的方法等写为不同的。
> 
> router/index.js
> 
>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import CompA from "@/components/CompA";
>     
>     Vue.use(Router)
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/compA',
>           name: 'compA',
>           component: CompA,
>         }
>       ],
>     })
> 
> store/CouterStore.js
> 
>     import Vue from 'vue';
>     import Vuex from 'vuex';
>     
>     Vue.use(Vuex);
>     import counter1 from "@/store/counter/Counter1";
>     import counter2 from "@/store/counter/Counter2";
>     
>     const couterStore = new Vuex.Store({
>         modules: {
>           cnt1: counter1,
>           cnt2: counter2
>         },
>         state: {count: 0},
>         mutations: {
>           incr(state) {
>             console.log('mutation:CouterStore incr')
>             state.count++
>           },
>           decr(state) {
>             state.count--
>           }
>         },
>     
>         getters: {
>           doubleCount(state) {
>             console.log('getter:CouterStore doubleCount')
>             return state.count * 2
>           }
>         },
>     
>         actions: {
>           incrAsync(context) {
>             console.log('action:CouterStore incrAsync');
>             setTimeout(() => {context.commit('incr')}, 1000)
>           }
>         }
>       }
>     );
>     
>     export default couterStore;
> 
> store/couter/Counter1.js
> 
>     const counter1 = {
>       namespaced: true,
>       state: {count: 1},
>       mutations: {
>         incr(state) {
>           // 这里的 `state` 对象是模块的局部状态
>           console.log('mutation:Couter1 incr')
>           state.count++
>         },
>         decr(state) {
>           // 这里的 `state` 对象是模块的局部状态
>           state.count--
>         }
>       },
>     
>       getters: {
>         doubleCount(state) {
>           console.log('getter:Couter1 doubleCount')
>           return state.count * 3
>         }
>       },
>       actions: {
>         incrAsync(context) {
>           console.log('action:Couter1 incrAsync');
>           setTimeout(() => { context.commit('incr')}, 1000)
>         }
>       }
>     }
>     export default counter1;
> 
> store/couter/Counter2.js
> 
>     const counter2 = {
>       namespaced: true,
>       state: {count: 2},
>       mutations: {
>         incr(state) {
>           // 这里的 `state` 对象是模块的局部状态
>           console.log('mutation:Couter2 incr')
>           state.count++
>         },
>         decr(state) {
>           // 这里的 `state` 对象是模块的局部状态
>           state.count--
>         }
>       },
>     
>       getters: {
>         doubleCount(state) {
>           console.log('getter:Couter2 doubleCount')
>           return state.count * 4
>         }
>       },
>       actions: {
>         incrAsync(context) {
>           console.log('action:Couter2 incrAsync');
>           setTimeout(()=> {context.commit('incr')}, 1000)
>         }
>       }
>     }
>     export default counter2;
> 
> components/CompA.vue
> 
>     <template>
>       <div class="compA">
>         <h1>compA</h1>
>         state.count：{
>         {msg}} <br>
>         getters.doubleCount: {
>         {doubleCount}}<hr>
>         <child-one></child-one><hr>
>         <child-two></child-two>
>       </div>
>     </template>
>     
>     <script>
>     import ChildOne from "@/components/ChildOne";
>     import ChildTwo from "@/components/ChildTwo";
>     
>     export default {
>       components: {ChildOne, ChildTwo},
>       data() {
>         return {
>         }
>       },
>       computed: {
>         msg() {
>           return this.$store.state.count;
>         },
>         doubleCount() {
>           return this.$store.getters.doubleCount;
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> components/ChildOne.vue
> 
>     <template>
>       <div class="childOne">
>         <h1>childOne</h1>
>         <button @click="incrTop">增加：顶层(CounterStore) //CompA</button><br><br>
>         <button @click="decrTop">减少：顶层(CounterStore) //CompA</button><br><br>
>         <button @click="incrTopAsync">异步增加：顶层(CounterStore)  //CompA</button><br><br>
>         <button @click="incrCnt1">增加：module(Counter1)  //ChildTwo</button><br><br>
>         <button @click="decrCnt1">减少：module(Counter1)  //ChildTwo</button><br><br>
>         <button @click="incrCnt1Async">异步增加：module(Counter1)  //ChildTwo</button>
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       data() {
>         return {
>         }
>       },
>       methods: {
>         incrTop() {
>           this.$store.commit('incr')
>         },
>         decrTop() {
>           this.$store.commit('decr');
>         },
>         incrTopAsync() {
>           this.$store.dispatch('incrAsync');
>         },
>         incrCnt1() {
>           this.$store.commit('cnt1/incr')
>         },
>         decrCnt1() {
>           this.$store.commit('cnt1/decr');
>         },
>         incrCnt1Async() {
>           this.$store.dispatch('cnt1/incrAsync');
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> components/ChildTwo.vue
> 
>     <template>
>       <div class="childTwo">
>         <h1>childTwo</h1>
>         state.cnt1.count：{
>         {msg}} <br>
>         getters.doubleCount: {
>         {doubleCount}}
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       data() {
>         return {
>         }
>       },
>       computed:{
>         msg() {
>           return this.$store.state.cnt1.count;
>         },
>         doubleCount() {
>           return this.$store.getters["cnt1/doubleCount"];
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     </style>
> 
> **测试**
> 
> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![20201220104911357.gif][]

[Vue--_--Vuex_IT_-CSDN]: https://knife.blog.csdn.net/article/details/111305412
[VueJS_Vuex_ - SegmentFault]: https://segmentfault.com/a/1190000015782272
[Vuex]: https://juejin.cn/post/6844903630517043214
[Vue_vuex - _ -]: https://www.cnblogs.com/xiaohuochai/p/7554127.html#anchor3
[Link 1]: https://vuex.vuejs.org/zh/
[API vuex-store]: https://vuex.vuejs.org/zh/api/#vuex-store
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[20201217195933843.gif]: /images/20221120/2a6e4fa97c8e4678bacf94152db23252.png
[Vuex_mapState_ mapActions_ mapMutations_ - _0707 -]: https://www.cnblogs.com/tugenhua0707/p/9794423.html
[20201219113438958.gif]: https://img-blog.csdnimg.cn/20201219113438958.gif
[2020121912230843.gif]: https://img-blog.csdnimg.cn/2020121912230843.gif
[20201219193440636.gif]: https://img-blog.csdnimg.cn/20201219193440636.gif
[20201219140108159.gif]: https://img-blog.csdnimg.cn/20201219140108159.gif
[Vue_vuex - _ - 1]: https://www.cnblogs.com/xiaohuochai/p/7554127.html#anchor8
[Vuex_-_module_state_mutations_actions_getters - _biubiubiu -]: https://www.cnblogs.com/HouJiao/p/12169948.html
[20201219233042492.gif]: https://img-blog.csdnimg.cn/20201219233042492.gif
[20201220104911357.gif]: https://img-blog.csdnimg.cn/20201220104911357.gif