How to Clear/Reset Vuex Module State to Default

Published on November 26, 2020 22 sec read

Hi artisans, we know that Vuex is a state management pattern + library for Vue.js applications. Sometimes, we need to clear or reset vuex store. In this article, we’re going to learn how to do that. Let’s get started:

Cart Example

Nagivate to store folder and create cart.js file.

const getDefaultState = () => {
  return {
    items: []

// initial state
const state = getDefaultState()

const mutations = {
  RESET_STATE(state) {
    Object.assign(state, getDefaultState())

const actions = {
  resetState({ commit }) {
  addToCart ({ state, commit }, item) {

export default {
  getters: {},

Now call resetCartState action from anywhere like:

That’s it. Thanks for reading. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.


Leave a Reply

Your email address will not be published. Required fields are marked *