美文网首页
Vuex中辅助函数mapGetters语法

Vuex中辅助函数mapGetters语法

作者: 简约酒馆 | 来源:发表于2019-12-17 00:00 被阅读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

    相关文章

      网友评论

          本文标题:Vuex中辅助函数mapGetters语法

          本文链接:https://www.haomeiwen.com/subject/nvpjnctx.html