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