CODEWITHSUNDEEP
vue.jsvuex
邱婷婷
邱婷婷

Reputation: 1

How to keep vue computed property the same as vuex state and vice versa?

I want to keep vue computed property the same as vuex state, and vice versa.But it did not achieve my expected result.This is a simple fiddle to show my question. https://jsfiddle.net/qtttttttttting/Lteoxz9f/22/

const store = new Vuex.Store({
  state: {
    fullName: "hhh hhh"
  },
  mutations: {
    change (state,data) {
      state.fullName = data;
    }
  }
})
new Vue({
  el: "#app",
  data(){return {}},
  methods: {
    toggle: function(){
            console.log(333)
            this.fullName="qqq ttt";
            console.log(this.fullName)
    }
  },
    computed: {
        fullName: {
            // getter
            get: function () {
                console.log(111);
                return store.state.fullName;
            },
            // setter
            set: function (newValue) {
                console.log(222);
                store.commit("change", this.fullName);
            }
        }
    },
    watch:{
        fullName(){
            console.log(444);
            store.commit("change", this.fullName);
        }
    }
})

Upvotes: 0

Views: 43

Answers (1)

gleam
gleam

Reputation: 870

You have a typo in your computed-setter: https://jsfiddle.net/0o2cnrvf/

        set: function (newValue) {
            console.log(222);
            store.commit("change", newValue);
        }

Upvotes: 1

Related Questions