vuex用法

actions.js

import api from '../api';
import { setStore } from '../api/storage';
import router from '../router';
import { Message } from 'element-ui';

// const mockData = {"userId":"109","userName":"点点滴滴","token":"RKxXyX7tHN26xwzveIu9vHWdstdUXT5U","loginUser":{"userId":"109","companyEntities":[],"selectedCompany":{"companyId":"55","roleEntities":[{"roleId":41,"resources":["/companyAdministrator/bug","/companyAdministrator/specific","/companyAdministrator/activity","/companyAdministrator/pay","/companyAdministrator/auth"]}]},"selectRole":{"roleId":41,"resources":["/companyAdministrator/bug","/companyAdministrator/specific","/companyAdministrator/activity","/companyAdministrator/pay","/companyAdministrator/auth"]}}}

export const isLogin= ({commit}) => {
  commit('login');
}

export const loginAccount = ({ commit }, id) => {
  api.post('/oneaccount/current',{'jk':id.id})
    .then(res => {
      if (res && res.data && res.data.code == 0) {
        const data = res.data;
        // 存储用户信息
        const userInfo = {
          userId: data.userId,
          userName: data.userName,
          nickName: data.loginUser.nickName,
          token: data.token,
          roleId: data.loginUser.selectRole ? data.loginUser.selectRole.roleId : 0,
          resources: data.loginUser.selectRole ? data.loginUser.selectRole.resources : [],
          companyEntities: data.loginUser.companyEntities,
          selectedCompany: data.loginUser.selectedCompany,
          getFlag:id.getFlag
        };
        setStore('user', userInfo);
        commit('login', userInfo);
        id.resolve&&id.resolve();
      } else if(res && res.data && res.data.code != 0) {
        commit('login/failure', res.data.msg);
        router.replace({ name: 'login' });
        // Message({
        //   message: res.data.msg,
        //   duration:500,
        //   type: 'error',
        // });
        // setTimeout(()=>{
        //   router.replace({ name: 'login' });
        // },500);
      }
    }, () => {
      commit('login/failure', new Error('Something bad happened'))
    })
}

export const fetchAccount = ({ commit }) => {
  api.get('/oneaccount/getCurrentUserInfo')
    .then((res) => {
      if (res && res.data) {
        if (res.data.code == 0) {
          const data = res.data;
          // 存储用户信息
          const userInfo = {
            userId: data.userId,
            userName: data.userName,
            nickName: data.loginUser.nickName,
            token: data.token,
            roleId: data.loginUser.selectRole.roleId,
            resources: data.loginUser.selectRole.resources,
            companyEntities: data.loginUser.companyEntities,
            selectedCompany: data.loginUser.selectedCompany
          };
          setStore('user', userInfo);
          commit('login', userInfo);
        } else {
          commit('login/failure', res.data.msg);
          router.replace({ name: 'login' });
          // Message({
          //   message: res.data.msg,
          //   duration:500,
          //   type: 'error',
          // });
          // setTimeout(()=>{
          //   router.replace({ name: 'login' });
          // },500);
        }
      }
    }, () => {
      commit('login/failure', new Error('Something bad happened'))
    })
}

export const fetchAccount2 = ({ commit }) => {
  api.get('/oneaccount/getCurrentUserInfo')
    .then((res) => {
      if (res && res.data) {
        if(res.data.code == 0){
          const data = res.data;
          // 存储用户信息
          const userInfo = {
            userId: data.userId,
            userName: data.userName,
            nickName: data.loginUser.nickName,
            token: data.token,
            roleId: data.loginUser.selectRole.roleId,
            resources: data.loginUser.selectRole.resources,
            companyEntities: data.loginUser.companyEntities,
            selectedCompany: data.loginUser.selectedCompany
          };
          setStore('user', userInfo);
          commit('login', userInfo);
        }else{
          commit('login/failure', res);
        }
      }
    }, () => {
      commit('login/failure', new Error('Something bad happened'))
    })
};


export const isLogout = ({ commit }) => {
  api.get('/oneaccount/logout').then(()=>{
    commit('logout');
  })
};

mutations.js 

const mutations = {
  login(state, userInfo){
    if (userInfo) {
      state.userId = userInfo.userId;
      state.userName = userInfo.userName;
      state.nickName = userInfo.nickName;
      state.token = userInfo.token;
      state.roleId = userInfo.roleId;
      state.resources = userInfo.resources;
      state.companyEntities = userInfo.companyEntities;
      state.selectedCompany = userInfo.selectedCompany;
      state.isLogin = true;
      state.getFlag = userInfo.getFlag;
    } else {
      state.isLogin = true;
    }
  },

  'login/failure': (state, err) => {
    state.loginErr = err
  },

  setWap(state, data) {
	  state.wapInfo = data;
	  state.nickName = data.nickName;
  },

  logout(state){
    state.isLogin = false;
  }
};

export default mutations

state.js

const state = {
 isLogin: false,
 loginErr: null,
 userId: 0,
 userName: '',
 nickName: '',
 token: '',
 resources: [],
 companyEntities: [],
 selectedCompany: null,
 wapInfo: {},
  getFlag:''
};

export default state

index,js

import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as getters from './getters';
import state from './state';
import mutations from './mutations';


Vue.use(Vuex);


export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: process.env.NODE_ENV !== 'production', // 严格模式
});

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 Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'jquery'
import VueClipboard from 'vue-clipboard2';
import 'highlight.js/styles/default.css';
import hljs from 'highlight.js';

/* icon-font */
import './assets/font/iconfont.css';

import './css/reset.css'
import './css/elementUI-reset.scss'
import './css/app.css'
import store from './store';
import './filters/global'
import api from './api/index'
import VueQuillEditor  from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

hljs.highlightCode = () => {
  const blocks = document.querySelectorAll('pre code');
  [].forEach.call(blocks, hljs.highlightBlock);
};

Vue.use(VueQuillEditor);
Vue.use(Element);
Vue.use(VueClipboard);

Vue.config.productionTip = false;
Vue.prototype.api = api;

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