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

【问题标题】：Hiding a paragraph using mutation in vuex?在 vuex 中使用突变隐藏段落？
【发布时间】：2019-11-05 20:19:44
【问题描述】：

我正在尝试理解 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????
    }

提前谢谢你

【问题讨论】：

标签： javascript vuejs2 vuex

【解决方案1】：

试试这个

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

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

我通常用大写蛇形写突变，但你可以把它改成小写。区分大小写。

要触发突变，请使用commit 和突变名称作为参数。您还可以传递一个额外的变量来提交第二个参数，例如：

$store.commit('TOGGLE_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”之类的。

【讨论】：

为什么在命名突变时使用大写字母...是否有其背后的逻辑原因，或者只是为了避免覆盖/区分大小写之类的？
@SirDad 这是我第一次学习 vuex 的时候，我也在搜索命名约定，偶然发现了像 forum.vuejs.org/t/… 这样的问题以及其他一些问题。而且在使用vuex命名空间模块的时候，因为函数名是大写的，模块名是camelCase，所以第一眼更容易看。
感谢您的帮助。是的，我改变了状态变量 lol