vuex学习笔记-核心概念（Getter）

Getter

• Getter用于对Store中的数据进行加工处理形成新的数据,只能读取Store中的数据，但是不能修改,getter数据会随着store中的数据变化而变化

1、创建vuex项目

使用Action的第一种方式：
编写app.vue

<template>
  <div id="app">
    <addition></addition>
  </div>
</template>

<script>
import Addition from './components/Addition.vue'

export default {
  name: 'app',
  //注册组件
  components: {
    Addition
  }
}
</script>

<style>
</style>

创建组件Addition

<template>
  <div>
    <h3>（第一种方式）{{$store.getters.showNum}}</h3>
    <h3>（第二种方式）{{showNum}}</h3>
  </div>
</template>
<script>
// 按需导入mapGetters  函数
import { mapGetters } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
  	//映射为计算属性
    ...mapGetters(['showNum'])
  }
}
</script>
<style lang="less" scoped>
</style>

编写store目录下的index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0 // 需要访问的数据
  },
  mutations: {
  },
  actions: {
  },
  getters: {
    // 添加了一个showNum的属性
    showNum: state => {
      return 'getter中的值为：' + state.count
    }
  },
  modules: {}
})

运行结果如下

总结:

在组件中访问getters 中的数据有两种方式

• this.$store.getters.全局数据名称 (this. $store.getters.count)
• 先按需导入mapGetters函数： import { mapGetters} from 'vuex',然后数据映射为计算属性computed:{ ...mapGetters(['全局数据名称']) }