Vuex动态注册模块state保留旧值问题
发布于 3 天前 作者 huaer 137 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

目前专案使用动态注册模块,有卸载模块,但再次注册模块时,之前模块的State还保留之前的数据,需求上并没有要保留state。

目前是这样写:

// module.js
import Vue from 'vue';

const state = {
	a: '',
	b: '',
	c: ''
}
const getters = { ... };
const mutations = { ... };
const actions = { ... };

export default {
	namespaced: true,
	state () { return state; },
	getters,
	mutations,
	actions
};

于使用页面 Component

// page.vue 的 <script>
import Module from './module.js';
export default {
	...
	beforeCreate () {
		// 注册模块
		this.$store.registerModule('modulename', Module);
	},
	beforeDestroy () {
		// 卸载模块
		this.$store.unregisterModule('modulename');
	},
	...
}

操作时更改Module的State

state.a = 'AAA'

离开此页面再回来时,state没有回到原本的 module.js,希望module呈现:

state.modulename = {
	a: '',
	b: '',
	c: ''
}

请问是哪里有错吗?

3 回复

模块的状态,应该通过 state.modulename.a 访问啊。

你的模块状态使用的是 module.js 里的 const state,每一次注册都会返回这个对象,这就和 Vue 组件的 data 返回一个外部变量的效果一样。卸载模块的过程并不会「删除」state 变量,其中的值自然就都保留下来了。

抱歉,我在叙述上有省略。
数据是在mutation改的,访问确实是用 state.modulename.a

访问、改值都依照Vuex单向数据流规定,没有任何错误,vuex strict 有开启。

回到顶部