Скрытие абзаца с использованием мутации в Vuex?

Question

Я пытаюсь понять vuex, а также мутации и действия, и я понимаю, что для изменения состояния вам нужно использовать мутацию, но на практике кажется, что, возможно, я делаю что-то не так или плохо понимаю.

Я пытаюсь скрыть этот абзац, используя мутацию из магазина.Я использую этот настоящий базовый код, чтобы понять концепцию мутации.

  <template>
  <p v-if="this.$store.state.true">Hide this using Vuex </p>
  <v-btn @click="true = !true"> Click Me </v-btn>
  </template>

В моем магазине.Файл JS

state : {
    true: false
  }

 mutations: {
    How would i go about creating a mutation????
    }

Заранее спасибо

Answer 1

Попробуйте это

mutations: {
    TOGGLE_TRUE (state) {
        state.true = !state.true
    }
}

<v-btn @click="$store.commit('TOGGLE_TRUE')"> Click Me </v-btn>

Я обычно пишу мутации с заглавными буквами в верхнем регистре, но вы можете изменить их на строчные. Он чувствителен к регистру.

Чтобы вызвать мутацию, используйте commit и имя мутации в качестве параметра. Вы также можете передать дополнительную переменную для фиксации 2-го параметра, например:

$store.commit('CHANGE_TRUE', true)

TOGGLE_TRUE (state, bool) {
    state.true = bool
}

и если вы хотите передать больше данных, используйте встряхивание объекта и дерева ES6

person = {name: 'johndoe', age: 30}
$store.commit('SET_PERSON', person)

SET_PERSON (state, {name, age}) {
    state.name = name
    state.age = age
}

p.s Вы должны найти более понятное имя состояния, а не просто «true», что-то вроде «showParagraph» подойдет.