#2248·vuex

vuex3.6.2内存泄漏

Author: cug-zgjCreated Jun 6, 2024Updated Jun 6, 2024

Version

3.6.2

Describe the bug

将vuex存储的数据使用计算属性引入，使用一个局部变量引用该计算属性，页面销毁前清除vuex的数据，该数据所占用的内容无法被释放

Reproduction

javascript

//test.vue
<template>
  <div>
    <div style="display: flex; justify-content: space-between;">
      <button type="button"
              @click="test">test</button>
      <button type="button"
              @click="myLogout">退出</button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Test',
  data () {
    return {
    }
  },
  methods: {
    myLogout () {
      this.$router.push('/login')
    },

    test () {
      const p = { ...this.accountInfo[0] }
    },

    ...mapActions([
      'initAccountInfo',
      'clearState'
    ])
  },

  mounted () {
    let AccountArr = []
    for (let i = 0; i < 10000; i++) {
      AccountArr.push({ value: i.toString(), label: i.toString() })
    }
    this.initAccountInfo(AccountArr)
  },

  computed: {
    ...mapGetters([
      'accountInfo'
    ]),
  },

  beforeDestroy () {
    this.clearState()
  }
}
</script>

javascript

//login.vue
<template>
  <div>
    <div style="display: flex; justify-content: space-between;">
      <button type="button"
              @click="test">test</button>
      <button type="button"
              @click="myLogout">退出</button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Test',
  data () {
    return {
    }
  },
  methods: {
    myLogout () {
      this.$router.push('/login')
    },

    test () {
      const p = { ...this.accountInfo[0] }
    },

    ...mapActions([
      'initAccountInfo',
      'clearState'
    ])
  },

  mounted () {
    let AccountArr = []
    for (let i = 0; i < 10000; i++) {
      AccountArr.push({ value: i.toString(), label: i.toString() })
    }
    this.initAccountInfo(AccountArr)
  },

  computed: {
    ...mapGetters([
      'accountInfo'
    ]),
  },

  beforeDestroy () {
    this.clearState()
  }
}
</script>

javascript

//index.js
import Vue from "vue";
import Vuex from "vuex";


Vue.use(Vuex);

export default new Vuex.Store({
  state:{
    accountInfo:[],
  },
  getters:{
    accountInfo: (state) => state.accountInfo
  },
  mutations:{
    initAccountInfo (state, arr){
      state.accountInfo = arr
    },
    clearState(state){
      state.accountInfo = []
    }
  },
  actions:{
    initAccountInfo({commit},payload) {
      commit('initAccountInfo',payload)
    },
    
    clearState({commit}) {
      commit('clearState')
    }
  }
});

先登录，点击test，然后退出，使用谷歌的memory查看snapshot，array的第一个就是这个未被释放的引用

Expected behavior

期望内存被释放

Additional context

No response

Validations

Follow our Code of Conduct
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Source: vuejs/vuex

View original on GitHub View discussion on GitHub