Vue2中能否为单个复杂组件创建随其销毁的本地Vuex实例？

可行性结论 #

这个方案是完全可行的。Vue2配套的Vuex 3.x版本本身支持创建多个完全独立的Store实例，不需要绑定到全局Vue实例，完全可以实现每个PersonCard组件独享一个状态实例，组件销毁时同步清理的需求。

实现思路 #

1. 为PersonCard单独编写专属的Vuex配置，导出实例生成函数而非固定实例，保证每个组件实例生成独立的Store
2. 在PersonCard根组件的created钩子中初始化Store，通过provide注入给所有后代组件
3. 在PersonCard根组件的beforeDestroy钩子中调用Store实例的$destroy方法清理资源，避免内存泄漏
4. 后代组件通过inject拿到当前组件树专属的Store实例，正常使用state、getters、commit、dispatch等API即可

代码示例 #

1. 编写PersonCard专属Store配置 #

在PersonCard目录下新建store.js：

import Vue from 'vue'
import Vuex from 'vuex'

// 若项目已经全局注册过Vuex，可删除下一行避免重复注册
Vue.use(Vuex)

// 导出工厂函数，每次调用生成全新的Store实例
export default () => new Vuex.Store({
  state: () => ({
    personInfo: {},
    formEditable: true
  }),
  mutations: {
    UPDATE_PERSON_INFO(state, payload) {
      state.personInfo = payload
    },
    TOGGLE_EDIT_STATUS(state) {
      state.formEditable = !state.formEditable
    }
  },
  actions: {
    async getPersonDetail({ commit }, personId) {
      const res = await fetch(`/api/person/${personId}`)
      commit('UPDATE_PERSON_INFO', await res.json())
    }
  },
  getters: {
    fullName: state => `${state.personInfo.firstName || ''} ${state.personInfo.lastName || ''}`
  }
})

2. PersonCard根组件集成独立Store #

修改PersonCard/index.vue：

<template>
  <div class="person-card">
    <PersonForm />
    <PersonImage />
  </div>
</template>
<script>
import createPersonStore from './store'
import PersonForm from './components/PersonForm/index.vue'
import PersonImage from './components/PersonImage/index.vue'

export default {
  name: 'PersonCard',
  components: { PersonForm, PersonImage },
  props: {
    personId: {
      type: String,
      required: true
    }
  },
  // 将当前Store注入到所有后代组件
  provide() {
    return {
      personCardStore: this.personStore
    }
  },
  created() {
    // 初始化当前组件专属的Store实例
    this.personStore = createPersonStore()
  },
  mounted() {
    // 正常调用Store的API
    this.personStore.dispatch('getPersonDetail', this.personId)
  },
  // 组件销毁时同步销毁Store，清理内存
  beforeDestroy() {
    this.personStore.$destroy()
  }
}
</script>

3. 后代组件使用专属Store #

以PersonForm/index.vue为例：

<script>
export default {
  name: 'PersonForm',
  // 注入当前组件树的专属Store
  inject: ['personCardStore'],
  computed: {
    personInfo() {
      return this.personCardStore.state.personInfo
    },
    formEditable() {
      return this.personCardStore.state.formEditable
    },
    fullName() {
      return this.personCardStore.getters.fullName
    }
  },
  methods: {
    onSubmit(formData) {
      this.personCardStore.commit('UPDATE_PERSON_INFO', formData)
    }
  }
}
</script>

注意事项 #

• 不要将独立Store挂载到Vue.prototype.$store，否则会覆盖全局Store，导致多个PersonCard实例状态互相干扰
• 必须导出Store工厂函数，不能直接导出固定的Store实例，否则所有PersonCard会共用同一个Store，无法实现状态隔离
• 务必在根组件销毁前调用$destroy()方法清理Store，否则Store内部的watcher、事件订阅会残留，造成内存泄漏
• 独立Store和全局Store互不影响，如果需要和全局状态交互，直接在独立Store中引入全局Store实例调用对应API即可

内容的提问来源于stack exchange，提问作者Дмитрий Фомин