标签：count ... 辅助 函数 vuex mapState mapActions mapMutations Vuex

一、组件访问state

1. 从 vuex 中导入 mapState 函数

import { mapState } from 'vuex'

2. 映射为当前组件的computed计算属性：

...mapState(['count'])

3.添加到组件

<template>
  <div>
    <h1>count值：{{count}}</h1>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

二、触发mutations

1. 从vuex中导入mapMutations函数

import { mapMutations } from 'vuex'

2. 将指定的 mapMutations 函数，映射为当前组件的methods方法

methods: {
    ...mapMutations(['add'])
}

3.在methods使用

methods: {
   ...mapMutations(['add']),
   changeEvent(){
    this.add(5);
   }
}

三、触发actions

1. 从 vuex 中按需导入 mapActions 函数

import { mapActions } from 'vuex'

2. 在组件中添加代码

<template>
  <div class="content">
    <div>当前最新count值：{{count}}</div>
    <div>getters: {{showNum}}</div>
    <button @click="changeEvent">触发按钮</button>
   </div>
</template>

<script>
import { mapState,mapActions} from 'vuex';
export default {
  name: 'Content',
  methods: {
    ...mapActions(['addAsync']),
    // 调用dispatch触发actions时携带参数
    changeEvent2() {
      this.addAsync(5);
    },
  },
  computed: {
    ...mapState(['count']),
  }
}
</script>

四、Getters

<template>
  <div class="content">
    <img alt="Vue logo" src="../assets/logo.png">
    <div>当前最新count值：{{count}}</div>
    <div>getters: {{showNum}}</div>
    <button @click="changeEvent1">触发同步按钮</button>
    <button @click="changeEvent2">触发异步按钮</button>
  </div>
</template>

<script>
import { mapState,mapMutations, mapActions, mapGetters} from 'vuex';
export default {
  name: 'Content',
  methods: {
    ...mapMutations(['add']),
    ...mapActions(['addAsync']),
    changeEvent1(){
     this.add(5);
    },
    // 调用dispatch触发actions时携带参数
    changeEvent2() {
      this.addAsync(5);
    },
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  }
}
</script>

标签：count,...,辅助,函数,vuex,mapState,mapActions,mapMutations,Vuex
来源： https://www.cnblogs.com/qingshuihongye/p/16647882.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。