2

Estou com a seguinte dúvida, eu tenho alguns inputs atrelados a estados do Vuex:

<input class="form-control" type="search" placeholder="Filtre sua pesquisa" v-model="$store.state.controlAccessModule.filters.search" v-on:keyup.enter="loadEmployees()" />

Porém por padrões do Vuex, não devo alterar o $state diretamente pelo v-model, como devo fazer isso? Utilizar um $state no v-model é uma "anti pattern"?

1 Resposta 1

3

Você precisa criar uma mutation na sua store, uma mutation é utilizada para atualizar um valor no state:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    username: ""
  },
  mutations: {
    setName(state, username) {
      state.username = username;
    }
  }
});

export default store;

Feito isso, você pode usar uma computed com getter e setter para atualizar o valor:

export default {
  computed: {
    username: {
      get() {
        return this.$store.state.username;
      },
      set(value) {
        this.$store.commit("setName", value);
      }
    }
  }
};

Exemplo: https://codesandbox.io/s/loving-swirles-twkw0?fontsize=14&hidenavigation=1&theme=dark

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .