Vue指令

创建项目：

vue init webpack 项目名称

element-ui

npm i element-ui -s

axios

npm i axios@1.1.3 -S

vuex

npm i vuex@3.6.2 -S

vuex持久化

npm i -S vuex-persistedstate@4.1.0

代理模版

   proxyTable: {
      '/api': {
        target: 'http://localhost:8081/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/ktnews/api'
        }
      },
      '/static': {
        target: 'http://localhost:8081/',
        changeOrigin: true,
        pathRewrite: {
          '^/static': '/ktnews/static'
        }
      }
    },

stroe index.js 

import Vue from 'vue'
import Vuex from "vuex";
import UserStore from "./modules/user";
import VuePersistedStatePlugin from 'vuex-persistedstate';

Vue.use(Vuex)

const store = new Vuex.Store({
  plugins: [
    VuePersistedStatePlugin({
      storage: window.localStorage,
      reducer: (state) => {
        return {
          UserStore: state.UserStore
        }
      }
    })
  ],
  state: {
    //根数据，可以直接使用this.$store.state.count访问
    count: 0
  },
  modules: {
    UserStore
  }
})

export default store;

//用户未登录的默认数据
const defaultUserInfo={
  nickname:'未登录',
  username:'未登录',
  avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
}
//用户登录的数据
const state={
  userInfo:defaultUserInfo,//先使用默认数据
  isLogin:false
}
//控制信息修改的方法
const mutations={
  login(state,userInfo){//登录
    console.log('登录:',userInfo)
    state.userInfo=userInfo;
    state.isLogin=true;
  },
  logout(state){//退出登录
    console.log('退出登录')
    state.userInfo=defaultUserInfo;
    state.isLogin=false;
  }
}
export default {
  state,
  mutations,
}

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";
import Store from "./store";

Vue.config.productionTip = false
Vue.prototype.$axios = axios;

Vue.prototype.$store = Store;
Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store: Store,
  components: {App},
  template: '<App/>'
})

原文地址：https://blog.csdn.net/a1241436267/article/details/144362950

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！