v-if를 사용하여 vuex를 통해 단락을 숨기는 방법

v-if를 사용하여 vuex를 통해 단락을 숨기는 방법

버튼을 클릭하고 단락을 숨길 수 있는 작은 앱을 만들려고 하지만 vuex를 사용하여 구현하려고 한다.나는 내 집에 단락이 하나 있다.vue 파일과 내 정보 단추.vue 파일.나는 버튼 클릭에 조건부로 단락을 숨기길 원하지만 vuex를 사용하여 그것을 달성하고 싶다.내가 어떻게 그럴까?내 가게 js, 집Vue and 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>

그mapMutations계산된 속성이 아닌 방법에 사용되어야 한다.

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

에서 보는 바와 같이:

이것으로 구성 요소의 돌연변이를 커밋할 수 있다.$store.commit('xxx') 또는 mapMutions 도우미를 사용하여 구성 요소 메서드를 저장.commit 호출에 매핑(루트 저장소 주입 필요):

참조URL: https://stackoverflow.com/questions/54311534/how-to-hide-a-paragraph-using-v-if-through-vuex