vuex控制动态组件

 动态组件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;