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>