使用vuex定义全局变量双向绑定问题

我现在用vuex定义了个全局变量variable,在某个组件里有个输入框需要绑定这个全局变量里的a(输入框内数据更新,a更新),因为修改Vuex数据要用mutations,如果直接<el-input v-model="$store.state.variable.a"/>是官方不建议的,那么怎么写才合适?

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store=new Vuex.Store({
  state:{
    variable:{
      a:1,
      b:2
    }
  },
  mutations:{
    setVariable(state,val){
      state.variable=val;
    }
  }
});

export default store

现在想到这样写,但是感觉有点麻烦,有没有更好的办法?

<el-input v-model="myVariable.a"></el-input>
data(){
      return{
        defaultValue:'',
        defaultNumber:0,
        myVariable:this.$store.state.variable
      }
    },
    watch:{
      myVariable:{
        handler(val){
          this.$store.commit('setVariable',val);
        },
        deep:true,
      }
    },
阅读 3.8k
1 个回答

input绑定一个组件内的变量,给input加一个change事件,在change事件中可以直接调用方法修改vuex的变量

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题