SoFunction
Updated on 2025-04-04

Implement data status query and change in Vuex

After vue injection, you can access vuex in any child component through this.$store

import store from './store' 
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

1. Access the value of a variable in the state in the child component through this.$. variable name in the child component

= this.$ //The tabbarActive here is the variable name stored in state in vuex

2. Update/insert the data state in vuex in the child component through this.$('method name', parameter)

1) Since the only way to change the store in vuex is to submit mutation, by calling the instantiated vuex, the corresponding methods in mutations can realize the change of the state value, where payload can be a parameter object, or a single value. The state parameter defaults to the first parameter when called and can not be passed, but state must be passed in mutations when declaring the function in mutations

  mutations: {
  changeTarBar (state,payload) {
    = payload
  }
 }

– Update status in store in child component

this.$("changeTarBar",idx)//inidxfor the passed parameters

– Or this way, the payload at this time is a parameter object, and the parameter value passed in by the child component can be obtained.

 this.$({
  type:'changeTarBar',//Type corresponding method name  idx,
 })

The above article on Vuex implementing data status query and change is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.