vuex学习---state访问状态对象

Posted 2020-09-23 风起了--

在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>