store 简单引入例子

main.js

import store from './store'

store/index.js

import Vue from 'vue'

import Vuex from 'vuex'

import getters from './getters'

import app from './modules/app'

import settings from './modules/settings'

import user from './modules/user'

import info from './modules/info'

Vue.use(Vuex)

const store = new Vuex.Store({

  modules: {

    app,

    settings,

    user,

    info

  },

  getters

})

export default store

modules/user.js

import { login, getInfo } from '@/api/user'

import { getToken, setToken, removeToken } from '@/utils/auth'

import { resetRouter } from '@/router'

import MyStorage from '@/utils/cache'

// import { setItem } from '@/utils/cache'

import qs from 'qs'

const state = {

  token: getToken(),

  name: MyStorage.getItem('name') || '',

  avatar: MyStorage.getItem('avatar') || ''

}

const mutations = {

  SET_TOKEN: (state, token) => {

    state.token = token

  },

  SET_NAME: (state, name) => {

    MyStorage.setItem('name', name)

    state.name = name

  },

  SET_AVATAR: (state, avatar) => {

    MyStorage.setItem('avatar', avatar)

    state.avatar = avatar

  }

}

const actions = {

  // user login

  login({ commit }, userInfo) {

    const { username, password } = userInfo

    return new Promise((resolve, reject) => {

      login(qs.stringify({ phone: username.trim(), verifCode: password, loginType: 0 })).then(response => {

        const { result } = response;

        if(result.userType!='100'){

          MyStorage.setItem('companyId', result.id)

          MyStorage.setItem('companyName', result.name)

          MyStorage.setItem('lng', result.lng)

          MyStorage.setItem('lat', result.lat)

          commit('SET_TOKEN', response.token || '123456789')

          commit('SET_NAME', result.name)

          commit('SET_AVATAR', result.icon)

          setToken(response.token || '123456789')

          resolve()

        }else{

          reject(new Error("无效账号"));

        }

      }).catch(error => {

        reject(error)

      })

    })

  },

  // get user info

  getInfo({ commit, state }) {

    return new Promise((resolve, reject) => {

      getInfo(state.token).then(response => {

        const { data } = response

        if (!data) {

          reject('Verification failed, please Login again.')

        }

        const { name, avatar } = data

        commit('SET_NAME', name)

        commit('SET_AVATAR', avatar)

        resolve(data)

      }).catch(error => {

        reject(error)

      })

    })

  },

  // user logout

  logout({ commit }) {

    return new Promise((resolve, reject) => {

      MyStorage.clear()

      commit('SET_TOKEN', '')

      commit('SET_NAME', '')

      commit('SET_AVATAR', '')

      removeToken()

      resetRouter()

      resolve()

    })

  },

  // logout({ commit, state }) {

  //   return new Promise((resolve, reject) => {

  //     logout(state.token).then(() => {

  //       commit('SET_TOKEN', '')

  //       removeToken()

  //       resetRouter()

  //       resolve()

  //     }).catch(error => {

  //       reject(error)

  //     })

  //   })

  // },

  // remove token

  resetToken({ commit }) {

    return new Promise(resolve => {

      commit('SET_TOKEN', '')

      removeToken()

      resolve()

    })

  }

}

export default {

  namespaced: true,

  state,

  mutations,

  actions

}

引入使用

 this.$store.dispatch('user/xx', { withoutAnimation: false })