Vuex中實(shí)現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改
在vuex進(jìn)行vue注入后即可在任一子組件中通過(guò)this.$store來(lái)訪問(wèn)vuex
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
1.在子組件中通過(guò)this.$store.state.變量名在子組件中訪問(wèn)state中某個(gè)變量的值
this.tabbarActive = this.$store.state.tabbarActive //這里的tabbarActive為存儲(chǔ)在vuex中state的變量名
2.在子組件中通過(guò)this.$store.commit(‘方法名'，參數(shù))來(lái)進(jìn)行對(duì)vuex中的數(shù)據(jù)狀態(tài)進(jìn)行更新/插入
1）由于vuex中store的改變唯一的途徑是提交mutation,通過(guò)調(diào)用實(shí)例化后的vuex，mutations中相對(duì)應(yīng)的方法可以實(shí)現(xiàn)對(duì)狀態(tài)值的改變，其中payload可以為參數(shù)對(duì)象，或者單個(gè)值，state參數(shù)在調(diào)用時(shí)默認(rèn)為第一個(gè)參數(shù)可以不傳，但是在mutations中申明該函數(shù)時(shí)必須傳入state
mutations: {
changeTarBar (state,payload) {
state.tabbarActive = payload
}
}
–在子組件中更新store中的狀態(tài)
this.$store.commit("changeTarBar",idx)//其中idx為傳入的參數(shù)
–或者這種寫法,此時(shí)的payload則為一個(gè)參數(shù)對(duì)象，可以通過(guò)payload.idx獲得子組件傳入的參數(shù)值
this.$store.commit({
type:'changeTarBar',//type對(duì)應(yīng)方法名
idx,
})
以上這篇Vuex中實(shí)現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue移動(dòng)端輕量級(jí)的輪播組件實(shí)現(xiàn)代碼
這篇文章主要介紹了vue移動(dòng)端輕量級(jí)的輪播組件實(shí)現(xiàn)代碼，一個(gè)簡(jiǎn)單的移動(dòng)端卡片滑動(dòng)輪播組件，適用于Vue2.x。本文給大家?guī)?lái)了實(shí)例代碼，需要的朋友參考下吧2018-07-07
Vue中@click.native的使用方法及場(chǎng)景
在組件中時(shí)常看到@click.native,在項(xiàng)目中遇到后,簡(jiǎn)單介紹下,這篇文章主要給大家介紹了關(guān)于Vue中@click.native的使用方法及場(chǎng)景的相關(guān)資料,需要的朋友可以參考下2023-11-11
vue-router如何實(shí)現(xiàn)history模式配置
這篇文章主要介紹了vue-router如何實(shí)現(xiàn)history模式配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Nuxt引入vue-persistedstate以及踩坑記錄
這篇文章主要介紹了Nuxt引入vue-persistedstate以及踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）
vue項(xiàng)目中點(diǎn)擊router-link標(biāo)簽鏈接都屬于聲明式導(dǎo)航。vue項(xiàng)目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）2022-12-12
vue使用el-upload實(shí)現(xiàn)文件上傳的實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了vue使用el-upload實(shí)現(xiàn)文件上傳,文中示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴們可以參考一下2024-01-01
前端開發(fā)需要經(jīng)常使用ECharts圖表渲染數(shù)據(jù)信息，在一個(gè)項(xiàng)目中我們經(jīng)常需要使用多個(gè)圖表，選擇封裝ECharts組件復(fù)用的方式可以減少代碼量，增加開發(fā)效率。感興趣的可以閱讀一下本文2023-04-04
詳解基于vue-cli3快速發(fā)布一個(gè)fullpage組件
這篇文章主要介紹了詳解基于vue-cli3快速發(fā)布一個(gè)fullpage組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
Vue使用Pinia輕松實(shí)現(xiàn)狀態(tài)管理
pinia，一個(gè)基于Vue3的狀態(tài)管理庫(kù)，它可以幫助開發(fā)人員管理Vue應(yīng)用程序的狀態(tài)，本文主要為大家介紹了Pinia的用法，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
今天我們用一種新的布局方式，使用路由視圖來(lái)實(shí)現(xiàn)布局樣式，本文將給大家介紹如何使用Vue?Router組合布局，文中有詳細(xì)的代碼示例供大家參考，感興趣的同學(xué)可以跟著小編一起學(xué)習(xí)2023-05-05