Vuex中辅助函数mapGetters语法

2019-12-17  本文已影响0人  简约酒馆

这里是仓库的代码

//  引入Vue构造函数
import Vue from "vue"
//引入 vuex
import vuex from  "vuex"
//将vuex挂载到vue
Vue.use(vuex);

//创建仓库
 var  store =new vuex.Store({
   state:{
     title:"hello world",
     n:10
   },
   //相当于组件的computed 计算属性 但是getters是vuex提供的计算方法
   getters:{
//举个栗子 使用 count求和
     count(state){
       //一个空的变量保存状态
       var s=0;
       //  for 循环
       for(var i=0;i<state.n;i++){
         //将每次循环的值赋给这个s变量
         s+=i
       }
       //循环后将s保存的和 返回
       return s
     }
   }
 })

//导出创建的仓库
export default store

这里是main.js 代码

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
//引入 创建的store仓库
import store from "./store";

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  //将store挂载到vue
  store,
  components: { App },
  template: '<App/>'
})

这是组件的代码

<template>
    <div>
<!--      这里的count是store中的getters定义的count计算方法-->
      {{count}}
    </div>
</template>
<script>
  // mapGetters 辅助函数
  import {mapGetters} from "vuex"
    export default {
        name: "Home",
      //computed是计算机属性  当依赖的属性值发生改变 自动调用
      computed:{
        // mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
        ...mapGetters([
          'count',
        ])
      }
    }
</script>
<style  scoped>
</style>

官方文档的地址
https://vuex.vuejs.org/zh/guide/getters.html

上一篇下一篇

猜你喜欢

热点阅读