如何通过 vuex 使用 v-if 隐藏段落？

Question

我正在尝试创建一个小应用程序，我可以在其中单击按钮并隐藏段落，但我正在尝试使用 vuex 来实现它。我的 Home.vue 文件中有一个段落，我的 About 中有一个按钮。 vue 文件。我希望在单击按钮时有条件地隐藏段落，但我想使用 vuex 来完成。我该怎么做？我的store.js、home.vue和About.vue如下。

This is how my store looks like.
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    show:true,
  },
  mutations: {
   toggle : state => {
     state.show = !state.show
   }
  },
  actions: {

  }
})

This is the Home.vue file
<template>
<p>This needs to disappear</p>
</template>

<script>
import {mapMutations} from "vuex"

export default {
 computed : {
   ...mapMutations ([
     "toggle"
   ])
 }
}
</script>

This is the About.vue file
<template>
  <div>
    <button @click="toggle">Click Me</button>
  </div>
</template>


<script>
import {mapMutations} from "vuex"

export default {
 computed : {
   ...mapMutations ([
     "toggle"
   ])
 }
}
</script>

Answer 1

mapMutations 应该用于不在计算属性中的方法中：

 methods:{
          ...mapMutations ([
             "toggle"
           ])
  }

就像你在official docs 看到的那样：

您可以使用 this.$store.commit('xxx') 在组件中提交变更，或使用 mapMutations 助手将组件方法映射到 store.commit 调用（需要根存储注入）：