0

I have a vuex object with array of languages that has objects with guid, name and level.

How can I write method so that it will make it reactive. I got to the point where I have input field with value="language.name" and I want to write method for @input but I don't know what best practice for it.

I have Vuex store:

const state = () => ({
  ...
  obj: {
    skills: [],
    languages: []
  },
  ...
})

An example the use in template in v-for="(language, index) in obj.languages":

v-text-field(
  :value="language.name"
  @input="setLanguage"
)

And code after reading in depth about getters, setters, modern Javascript limitations for Vue so it can't track changes of an array in state therefore it is required to use workaround as Vue.set() built-in method and use of TodoMVC example on vuex github that I came up with:

setLanguage: (e) => {
  function f({language, guid = language.guid, name = language.name, level = language.level}){
    Vue.set(this.$store.state.obj.languages, this.$store.state.obj.languages.findIndex((it) => it.guid === guid), {guid, name, level})
  }
  const name = e.target.value.trim()
  const language = this
  f({language, name})
}

It doesn't seems to be right. And I feel I don't understand the concept.

Can you show what is the best practice to make reactive objects of an array in state of vuex?

Kaspars Siricenko
  • 15
  • 5

1 Answers1

0

With vuex, you want to be using actions and mutations.

setLanguage: (e, index) => {
  let name = e.target.value.trim()
  this.$store.dispatch('setLanguage', {name, index}) //dispatches a vuex action
}

Then define an action:

setLanguage({ commit }, payload) {
  commit('setLanguage', payload) //commits a vuex mutation
}

And finally a mutation:

setLanguage(state, payload) {
  state.languages[payload.index].name = payload.name
}

see the vuex documentation on this: https://vuex.vuejs.org/guide/actions.html

Edward Cahyadi
  • 450
  • 5
  • 9