我如何从组件更改 vuex 中的状态

Question

我从 vuex 开始，有点困惑。我想在另一个组件（导航栏）中单击元素时显示购物车，并且购物车组件将显示在主视图中。这是我的代码： 导航栏

<img src="../assets/icons/cart-icon.svg" class="icon" @click="$store.commit('customChange')" />

家居

<div v-if="showCartHere">
  <Cart />
</div>
<script>
import Cart from '../components/Cart.vue'

export default {
    name: 'Home',
    components: { Cart },
    data() {
        return {
            showCartHere: false
        }
    },
    mounted() {
        this.showCartHere = this.$store.state.showCart
    }
}
</script>

商店

import { createStore } from 'vuex'

export default createStore({
  state: {
    showCart: false
  },
  getters: {
    showCart: state => {
      return state.showCart
    }
  },
  mutations: {
    customChange(state) {
      return state.showCart = !state.showCart
    }
  },
  actions: {
    customChange({ commit }) {
      commit('customChange')
    }
  },
  modules: {
  }
})

Answer 1

组件

<template>
  <p v-if="showcart">Show</p>
</template>
<script>
import { mapState } from 'vuex';
computed: (state) => {
  showCart: state.cart.showCart
}
methods: {
  showCartIcon() {
    this.$store.dispatch('cart/show', true)
  }
}
</script>

现在在您的 module/Cart.js 中

const state = () => ({
  showCart: false,
})
const actions = {
  show({commit}) {
    commit('showcartMt', true)
  }
}

const mutations = {
  showcartMt(state, toggle) {
    state.showCart = toggle;
  }
}