vuex模块化 怎么引用state_[Vuex系列] - 细说state的几种用法
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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DPVS_DPVS配置说明
- 下一篇： unity 给图片边缘_Unity Sh