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 輔助函式幫助我們生成計算屬性