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

Question

我正在尝试创建一个小应用程序，我可以在其中单击按钮并隐藏该段落，但我正在尝试使用 vuex 来实现它。我的 Home.vue 文件中有一个段落，我的关于中有一个按钮。 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 中看到的那样:

You can commit mutations in components with this.$store.commit('xxx'), or use the mapMutations helper which maps component methods to store.commit calls (requires root store injection):