[Vuejs]-Vuex – How to clear one element in store

by

1👍

✅

I think you are falling into Vue’s reactivity caveats. Vue cannot listen to key addition or removal, which is why you need to use Vue.set or Vue.delete

You can try to simply replace

state.emailProducts = {}

with

Vue.set(state, "emailProducts", {})

And if that doesn’t work, delete all the keys one by one

Object.keys(state.emailProducts).forEach(key => 
  Vue.delete(state.emailProduct, key)
)

You can read more about reactivity caveats here : https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

👤Seblor

0👍

There seems works:

const store = new Vuex.Store({
  state: {
    products: {},
    productCount: null,
    emailProducts: { "0":
      { 
          "productTitle": "", 
          "productId": "", 
          "productImage": "",
          "productImageWidth": "",
          "productPosition": ""
      }
    }
  },
  mutations: {
    zeroOutEmailProducts: (state) => {
      state.emailProducts = {}
    }
  },
  actions: {
    resetEmailProducts: ({ commit }) => {
      commit('zeroOutEmailProducts')
    }
  }
})

new Vue({
  el: '#app',
  store,
  computed: {
    ...Vuex.mapState({
      emailProducts: state => state.emailProducts
    })
  },
  methods: {
    clearWithUnnecessaryAction() {
      store.dispatch('resetEmailProducts')
    },
    clearWithMutation() {
      store.commit('zeroOutEmailProducts')
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.3/vuex.min.js"></script>
<div id="app">
  <button @click="clearWithUnnecessaryAction">clearWithUnnecessaryAction</button>
  <button @click="clearWithMutation">clearWithMutation</button>
  <pre>{{ emailProducts }}</pre>
</div>
👤Christian Carrillo

Leave a comment