动态组件component标签
<component :is="LoginComponent"></component>
import { mapGetters } from 'vuex';
import LoginIndex from '@/views/login/LoginIndex.vue';
import ResetIndex from '@/views/login/ResetIndex.vue';
import ResetSuc from '@/views/login/ResetSuc.vue';
import FirstReset from '@/views/login/FirstReset.vue';
export default {
components: {
LoginIndex,
ResetIndex,
ResetSuc,
FirstReset
},
computed: {
...mapGetters(['LoginComponent'])
}
}
//任何改变LoginComponent的值,调用vuex里的方法
this.$store.commit('user/SET_LOGINCOMPONENT', 'ResetSuc');
store/modules/user.js文件 部分代码
//store/modules/user.js
const state = {
LoginComponent: 'LoginIndex',
}
const mutations = {
SET_LOGINCOMPONENT(state, payload) {
state.LoginComponent = payload;
},
}
export default {
namespaced: true,
state,
mutations,
actions
};
store/getter.js 部分代码
//store/getter.js
const getters = {
LoginComponent: state => state.user.LoginComponent,
}
export default getters;
store/index.js 部分代码
//store/index.js
import getters from './getters';
import user from './modules/user';
const store = new Vuex.Store({
modules: {
user,
},
getters
});
export default store;