Question

我试图了解Vuex，变异和动作，但要改变状态，就需要使用变异，但实际上，我好像做错了什么，或者我不太了解。< / p>

我正在尝试使用商店中的一个变体来隐藏此段。我正在使用这个真正的基本代码来了解突变的概念。

  <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和突变名称作为参数。您还可以传递一个额外的变量来提交第二个参数，例如：

$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'这样的事情。

在vuex中使用突变隐藏段落？

1 个答案: