[Vuex系列] - 細說state的幾種用法

state 存放的是一個對象，存放了所有的應用層級的狀態，主要是存放咱們平常使用的組件之間傳遞的變量。

咱們今天重點講解下state的幾種用法，至於如何從頭開始建立Vuex項目，請看我寫的第一個文章。點擊查看

用法一：使用this.$store

咱們仍是以一個累加器的例子來看如何實現，具體實現代碼以下：

在state.js文件中添加一個count的變量

const state = {
  count: 0
}
export default state
複製代碼

在src文件夾下新建一個state文件夾，並新建index.vue文件，文件內容以下：

<template>
  <div class="state">
    <h2>{{ count }}</h2>
    <button @click="add">+ADD</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      // 第一種用法
      return this.$store.state.count
    }
  },
  methods: {
    add () {
      // 第一種用法
      this.$store.state.count++
    }
  }
}
</script>

複製代碼

在Vue根實例中註冊了store選項，該store實例會注入到根組件下的全部子組件中，且子組件能經過 this.$store 訪問到。

用法二：引用store.js文件

具體實現代碼以下：

state.js文件內容參考上面的例子，修改state/index.vue,內容以下：

<template>
  <div class="state">
    <h2>{{ count }}</h2>
    <button @click="add">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store.js'
export default {
  computed: {
    count () {
      // 第二種用法
      return store.state.count
    }
  },
  methods: {
    add () {
      // 第二種用法
      store.state.count++
    }
  }
}
</script>

複製代碼

這種方法在Vue的模塊化的構建系統中，在每一個須要使用state的組件中須要頻繁地導入。

用法三：使用mapState輔助函數

具體實現代碼以下：

state.js文件內容參考上面的例子，修改state/index.vue,內容以下：

<template>
  <div class="state">
    <h2>{{ count }}</h2>
  </div>
</template>

<script>
// import store from '@/store/store.js'
import { mapState } from 'vuex'
export default {
  computed: mapState({
    count: state => state.count
  })
}
</script>

複製代碼

或

<template>
  <div class="state">
    <h2>{{ count }}</h2>
  </div>
</template>

<script>
// import store from '@/store/store.js'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['count'])
  }
}
</script>
複製代碼

當一個組件須要獲取多個狀態時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題，咱們可使用 mapState 輔助函數幫助咱們生成計算屬性

1、[Vuex系列] - 初嘗Vuex第一個例子

2、[Vuex系列] - 細說state的幾種用法

3、[Vuex系列] - Mutation的具體用法

4、[Vuex系列] - getters的用法

5、[Vuex系列] - Actions的理解之我見

6、[Vuex系列] - Module的用法（終篇）