我如何做一个设置器来解决计算的属性问题 - VueJS

Question

Im trying to fix this error where i cant close the dialog by clicking the X button on the top right, but i can close it by clicking the "Agregar" or "Cancelar" button.

This is how i sync my Dialog

<el-dialog title="Agregar Persona" :visible.sync="getAgregarPersonaDialog">

And here is my Computed Property

computed: {
getAgregarPersonaDialog() {
      return this.$store.state.agregarPersonaDialog;
    }
}

This is how i change the value of my state

setAgregarPersonaDialogo(state) {
      state.agregarPersonaDialog = !state.agregarPersonaDialog
    },

And in my state i have this atribute

export default new Vuex.Store({
state: {
  agregarPersonaDialog: false
}
});

This is the error i have everytime i click the X button on the dialog

Computed property "getAgregarPersonaDialog" was assigned to but it has no setter.

Answer 1

ti change the state you need 
 1. action
 2. Mutator

example in store.js
state: {
agregarPersonaDialog: false,
},

// value is data what you send from your componet

action: {
changeState(context){
 context.commit('changeValue')
},

mutations: {
changeValue(state) {
  state.agregarPersonaDialog = !state.agregarPersonaDialog;
}
},

---------------------
in your compoent create method

methods: {
changeValue(){
this.$store.dispatch('changeState');
}
}

try this!

Answer 2

When using Vuex, if your need to mutate any data on state arises then you absolutely need an action that calls a mutation to mutate state.

This is the most important use case of Vuex, to keep track of actions that mutates state

what you did is absolutely wrong.

To achieve your goal, you need two things.

1. an action
2. a mutation

action: {
// The first parameter is an object, so it be destructured
// for simple access
doSomething({ commit }, payload){
// commit a change by calling mutation, second parameter
// is the arguments you passed to your action
 commit('mutateData', payload)
}
},

mutations: {
mutateData(state, payload) {
// You can instead commit the argument
// I.e state.data = payload
  state.agregarPersonaDialog = !state.agregarPersonaDialog;
}
},

You can then dispatch your actions in any components

methods: {
changeValue(){
this.$store.dispatch('doSomething', 'this is an arg');
// Note I passed an argument just for illustration
// in your case, you don't have to
}
}

Now your code should work