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 })