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调用（需要进行根存储注入）：

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

1 个答案: