VUEX mapState 和 mapGetters的使用

mapState:

首先要在使用sore文件的文件引入:

import {mapState} from 'vuex';

在js；红色的是用到的 mapState可以自动生成 计算属性

<script>
    import {mapState,mapGetters} from 'vuex';
    
    export default{
        data(){
            return{
                n:1,
            }
        },
        computed:{
　　　　　　　　//第一种写法  从Strate读取数据(对象写法)
             ...mapState({he:'nbr',xuexiao:'school',name:'myname'}),
　　　　　　　// 第二种写法 从State读取数据(数组写法)
　　　　　　　　...mapState(['nbr','school','myname']),

 bigSum(){

return this.$store.getters.bigSum
             }
        },
        mounted(){
　　　　　　//如果是数组写法下面就不用写
        const x= mapState({he:'nbr',xuexiao:'school',name:'myname'})
        },
        methods:{
            add(){
                   // 调用add方法
                this.$store.dispatch('add',this.n)
            },
            subtract(){
                       this.$store.dispatch('subtract',this.n)
            },
            odd(){
                       this.$store.dispatch('odd',this.n)
            },
            item(){
                   this.$store.dispatch('item',this.n)
            }
        },
    }
</script>

html；红色的是用到的 

<template>
  <div id="app">
      <h1>当前总数为:{{he}}</h1>
      <h2>放大十倍总数为:{{bigSum}}</h2>
      <h3>我在{{xuexiao}}我是{{name}}</h3>
          <select  v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          </select>
      <button @click="add">+</button>
      <button @click="subtract">-</button>
      <button @click="odd">为奇数再加</button>
      <button @click="item">等一等再加</button>
    <!-- <router-view/> -->
  </div>
</template>

store文件里的state

state: {
      nbr:0,//当前的和
      school:'京海学校',
      myname:'张三'
  },

 mapGetters:　　

bigSum(){

                 return this.$store.getters.bigSum
             }

把上面这个替换为：

// 数组写法， 从getters里读取对象
             ...mapGetters(['bigSum'])