vuex的state中的數據的四種使用方法

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
    count: 1
}
export default new Vuex.Store({
    state,mutations
})

1. 直接通過$store來使用

<template>
  <div>
      <h3>{{msg}}</h3>
      <hr/>
      <h3>{{$store.state.count}}</h3>
</button>
  </div>
</template>

<script>
import store from '@/vuex/store'
export default {
    data(){
        return{
            msg:"hello vuex"
        }
    },
    store
}
</script>
<style>
</style>

2. 通過computed添加一個計算屬性來使用

<template>
  <div>
      <h3>{{$store.state.count}}------{{count}}</h3>
      <hr/>
  </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState} from 'vuex'
export default {
    data(){
        return{
            msg:"hello vuex"
        }
    },
     computed:{
         count(){
             return this.$store.state.count
         }
	},
    store
}
</script>
<style>
</style>

3. 通過computed+mapState返回函數的方法來使用

<template>
  <div>
      <h3>{{$store.state.count}}------{{count}}</h3>
      <h3>{{$store.state.count}}------{{a}}</h3>
      <hr/>
      <p>
          <button @click="$store.commit('add')">+</button>
          <button @click="$store.commit('reduce')">-</button>
      </p>
  </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState} from 'vuex'
export default {
    data(){
        return{
            msg:"hello vuex"
        }
    },
        computed: mapState({
             count:state=>state.count
         }),
    store
}
</script>
<style>
</style>

4. 通過computed+mapState的數組來使用

<template>
  <div>
      <h3>{{$store.state.count}}------{{count}}</h3>
      <h3>{{$store.state.count}}------{{a}}</h3>
      <hr/>
      <p>
          <button @click="$store.commit('add')">+</button>
          <button @click="$store.commit('reduce')">-</button>
      </p>
  </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState} from 'vuex'
export default {
    data(){
        return{
            msg:"hello vuex"
        }
    },
    //名稱要與state中的數據屬性名稱相同
    computed:{...mapState(['count'])},
    store
}
</script>
<style>
</style>