Static GitHub Issues

[2879] namespaced store module state is not cleared

prev: Server render complete hook/event
next: nuxt.config.ts

The issue is that the state from namespaced store modules is not cleared before each request, so one user can see the remains of state from other user. Here is the code to reproduce it:

/store/index.js

import Vuex from 'vuex'

import user from './modules/user'

const createStore = () => {
  return new Vuex.Store({
    modules: {
      user
    }
  })
}

export default createStore

/store/modules/user.js

export default {
  namespaced: true,

  state: {
    profile: null
  },

  mutations: {
    getProfile(state ) {
      state.profile = { date: new Date() }
    }
  }
}

/middleware/set-user.js

export default function ({ store }) {
  console.log(store.state.user.profile) // you will see here the value from previous request, or null if this is the first request
  if (!store.state.user.profile) {
    // store.state.user.profile should be null in middleware
    // for some reason it takes the value from previous requests
    store.commit('user/getProfile')
  }
}

/pages/index.vue

<template>
  <section class="container">
    {{ user }}
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: mapState({
    user: state => state.user.profile
  }),
}
</script>

Here is the repo to reproduce the issue

Steps to reproduce the issue: 1. npm run dev 2. Enter http://locahost:3000. You will see null output from middleware. 3. Refresh the page. You will see that the console.log from middleware will return the value from previous request

I noticed that everything works fine if the module is not namespaced

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2502">#c2502</a>)</em></sub></div>