Как скрыть абзац используя v-if через vuex? - PullRequest
Новая
       5

Как скрыть абзац используя v-if через vuex?

0 голосов
/ 22 января 2019

Я пытаюсь создать небольшое приложение, в котором я могу нажать на кнопку и скрыть абзац, но я пытаюсь реализовать это с помощью vuex. У меня есть абзац в моем файле Home.vue и кнопка в моем О. Vue File. Я хочу, чтобы абзац скрывался условно нажатием кнопки, но я хочу сделать это с помощью 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>

1 Ответ

0 голосов
/ 22 января 2019

mapMutations следует использовать в методах, не входящих в вычисляемое свойство: 

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

как вы видите в official docs:

Вы можете зафиксировать мутации в компонентах с помощью этого. $ Store.commit ('xxx') или использовать помощник mapMutations, который отображает методы компонентов для вызовов store.commit (требуется внедрение корневого хранилища):

...