vuex state使用

访问vuex中的state值

方式1

<div>{{$store.state.count}}</div>

方式2

<template>
  <div id="app">
    <div>{{count}}</div>
  </div>
</template>
 
<script>
export default {
 computed:{
   count(){
     return this.$store.state.count       //因为store挂载到vue的实例上 所以可用通过this.$store访问 this指vue实例
   }
 }
}

方式3

<template>
  <div id="app">
    <div>{{rename}}</div>
  </div>
</template>
 
<script>
import {mapState} from 'vuex'
export default {
 computed:{
   ...mapState({
     'rename':"count"      //通过对象扩展运算符 使用对象 对count 进行重命名
   })
 }
}
</script>

方式4

<template>
  <div id="app">
    <div>{{count}}</div>
  </div>
</template>
 
<script>
import {mapState} from 'vuex'
export default {
 computed:{
   ...mapState(["count"]) //通过扩展运算符 使用数组方式
 }
}
</script>