vuex學習---state訪問狀態對象

在vuex學習---vuex簡介中已經介紹過vuex的簡單使用，在這個例子中，沿用以上的模板，介紹一下state訪問狀態對象的幾種寫法：

 

<template>
  <div id="app">
     <div id="appaaa">
        <h1>這是vuex的示例</h1>

        <p>調用倉庫常量 {{$store.state.count}}</p>
        <!-- <p>組件內部count{{count111}}</p> -->
        <p>組件內部count{{count}}</p>
        <p>
            <button @click = "$store.commit('add')">加</button>
            <button @click = "$store.commit('sub')">減</button>
        </p>
    </div>
  </div>
</template>

<script>
//引入mapState 管理狀態太多，幫助生成計算屬性
import {mapState} from 'vuex'
export default {
  name:'app',
  data(){
      return {
         count:0
      }
  },
  /*
  computed:{  //計算屬性，在未加載count以前將其計算一下
      count111(){    // 計算屬性下的是一個函數的形式，可是倒是一個數，爲了區分，這裏用count111 
          return this.$store.state.count + 1;  
          //這裏的this指的是 main.js下的實例下store
      }
  }
 */

 // computed:mapState({
 // count111:state => state.count + 3   //es6的寫法 count依舊是函數 state是參數 返回值是 state.count
 //   })


 //能夠直接遠程加載 使用這個時要將count：0刪掉，不然報錯
 computed:mapState(['count']) 

}
</script>

<style>

</style>