码迷,mamicode.com
首页 > 其他好文 > 详细

Vuex mapState的基本使用

时间:2020-07-24 09:41:52      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:div   基本   属性   state   rip   com   映射   tor   default   

mapState把Store中的state映射到组件中的计算属性

Store文件

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    msg: ‘Hello world‘,
    count: 0
  },
  mutations:{
  },
  actions:{
  },
  modules:{
  }
})

vue文件

<template>
  <div>
    <p>count: {{count}}</p>
    <p>msg: {{msg}}</p>
  </div>
</template>

<script>
import { mapState } from ‘vuex‘
export default {
  computed:{
    /**
      相当于
      count: state => state.count
      msg: state=> state.msg
     */
    ...mapState([‘count‘,‘msg‘])
  }
}
</script>

如果vue文件已经存在count msg属性使用对象形式生成计算属性

<template>
  <div>
    <p>count: {{num}}</p>
    <p>msg: {{message}}</p>
  </div>
</template>

<script>
import { mapState } from ‘vuex‘
export default {
  computed:{
    /**
      相当于
      num: state => state.count
      message: state=> state.msg
     */
    ...mapState({num: ‘count‘, message: ‘msg‘})

  }
}
</script>

Vuex mapState的基本使用

标签:div   基本   属性   state   rip   com   映射   tor   default   

原文地址:https://www.cnblogs.com/leslie1943/p/13369604.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!