vuex模块化 怎么引用state_[Vuex系列] - 细说state的几种用法
state 存放的是一個對象，存放了全部的應(yīng)用層級的狀態(tài)，主要是存放我們?nèi)粘Ｊ褂玫慕M件之間傳遞的變量。
我們今天重點(diǎn)講解下state的幾種用法，至于如何從頭開始創(chuàng)建Vuex項(xiàng)目，請看我寫的第一個文章。點(diǎn)擊查看
用法一：使用this.$store
我們還是以一個累加器的例子來看如何實(shí)現(xiàn)，具體實(shí)現(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根實(shí)例中注冊了store選項(xiàng)，該store實(shí)例會注入到根組件下的所有子組件中，且子組件能通過 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)中，在每個需要使用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)一個組件需要獲取多個狀態(tài)時候，將這些狀態(tài)都聲明為計算屬性會有些重復(fù)和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性
總結(jié)
以上是生活随笔為你收集整理的vuex模块化 怎么引用state_[Vuex系列] - 细说state的几种用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DPVS_DPVS配置说明
- 下一篇： vue进行判断使用class_vue如何