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

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

用法一：使用this.$store

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

在state.js文件中添加一個(gè)count的變量

const state = {

count: 0

}

export default state

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

{{ count }}

+ADD

export default {

computed: {

count () {

// 第一種用法

return this.$store.state.count

}

},

methods: {

add () {

// 第一種用法

this.$store.state.count++

}

}

}

在Vue根實(shí)例中注冊(cè)了store選項(xiàng)，該store實(shí)例會(huì)注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到。

用法二：引用store.js文件

具體實(shí)現(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)中，在每個(gè)需要使用state的組件中需要頻繁地導(dǎo)入。

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

具體實(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'])

}

}

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

總結(jié)

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

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