state 存放的是一個對象，存放了全部的應(yīng)用層級的狀態(tài)，主要是存放我們?nèi)粘Ｊ褂玫慕M件之間傳遞的變量。

我們今天重點講解下state的幾種用法，至于如何從頭開始創(chuàng)建Vuex項目，請看我寫的第一個文章。點擊查看

用法一：使用this.$store

我們還是以一個累加器的例子來看如何實現(xiàn)，具體實現(xiàn)代碼如下：

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

const state = {

count: 0

}

export default state

在src文件夾下新建一個state文件夾，并新建index.vue文件，文件內(nèi)容如下：

{{ count }}

+ADD

export default {

computed: {

count () {

// 第一種用法

return this.$store.state.count

}

},

methods: {

add () {

// 第一種用法

this.$store.state.count++

}

}

}

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

用法二：引用store.js文件

具體實現(xiàn)代碼如下：

state.js文件內(nèi)容參考上面的例子，修改state/index.vue,內(nèi)容如下：

{{ count }}

+ADD

import store from '@/store/store.js'

export default {

computed: {

count () {

// 第二種用法

return store.state.count

}

},

methods: {

add () {

// 第二種用法

store.state.count++

}

}

}

這種方法在Vue的模塊化的構(gòu)建系統(tǒng)中，在每個需要使用state的組件中需要頻繁地導(dǎo)入。

用法三：使用mapState輔助函數(shù)

具體實現(xiàn)代碼如下：

state.js文件內(nèi)容參考上面的例子，修改state/index.vue,內(nèi)容如下：

{{ count }}

// import store from '@/store/store.js'

import { mapState } from 'vuex'

export default {

computed: mapState({

count: state => state.count

})

}

或

{{ count }}

// import store from '@/store/store.js'

import { mapState } from 'vuex'

export default {

computed: {

...mapState(['count'])

}

}

當一個組件需要獲取多個狀態(tài)時候，將這些狀態(tài)都聲明為計算屬性會有些重復(fù)和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性

總結(jié)

以上是生活随笔為你收集整理的vuex模块化 怎么引用state_[Vuex系列] - 细说state的几种用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。