vuex使用

在store下创建modules文件夹，在里面创建对应要存储的文件

// import api from '../../api/user'
const user = {
  namespaced: true, // 开启命名空间
  state: {
    img: '', // 用户头像
    id: '',
    account: '',
    nackname: '',
    email: '',
    region_id: '',
    realname: '',
    age: '',
    sex: '',
    address: '', // 与用户相关的活动
    role: ''
  },
  getters: {
    img: state => state.img,
    id: state => state.id,
    account: state => state.account,
    nackname: state => state.nackname,
    email: state => state.email,
    region_id: state => state.region_id,
    age: state => state.age,
    sex: state => state.sex,
    realname: state => state.realname,
    address: state => state.address,
    role: state => state.role
    // 是否已经报名该活动
    // isJoin: state => (activityId) => {
    //   const activities = state.activities.applyActivities
    //   let isJoin = false
    //   activities.forEach(element => {
    //     if (element.activity_id == activityId) {
    //       isJoin = true
    //     }
    //   })
    //   return isJoin
    // }

  },
  mutations: {
    SET_IMG: (state, img) => {
      state.img = img
    },
    SET_USERID: (state, id) => {
      state.id = id
    },
    SET_ACCOUNT: (state, account) => {
      state.account = account
    },
    SET_NACKNAME: (state, nackname) => {
      state.nackname = nackname
    },
    SET_EMAIL: (state, email) => {
      state.email = email
    },
    SET_AGE: (state, age) => {
      state.age = age
    },
    SET_SEX: (state, sex) => {
      state.sex = sex
    },
    SET_ADDRESS: (state, address) => {
      state.address = address
    },
    SET_ROLE: (state, role) => {
      state.role = role
    }
  },
  actions: {
    async logOut () {
      localStorage.removeItem('Token')
    }
    // 刷新活动
    // async updateActivities (context) {
    //   api.user.getUserActivities()
    //     .then(data => {
    //       delete data.ID
    //       delete data.user_id
    //       delete data.user_name
    //       context.commit('SET_ACTIVITIES', data)
    //     })
    // }
  }
}

export default user

然后在store的index文件里添加进去

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    user
  }
})

使用：
permission.js中使用案例

// 路由守卫
import router from './router'
import user from './api/user'
import store from './store'
// 白名单
const whiteList = ['/login', '/register']
router.beforeEach((to, from, next) => {
  if (localStorage.getItem('Token')) {
    if (to.path === '/login') {
      next({
        path: '/'
      })
    } else {
      Promise.all([user.getUserInfo()]).then(res => {
        // console.log('wwwwee')
        console.log(res)
        store.commit('user/SET_IMG', res[0].data.img)
        store.commit('user/SET_USERID', res[0].data.id)
        store.commit('user/SET_NACKNAME', res[0].data.nackname)
        store.commit('user/SET_ADDRESS', res[0].data.address)
        store.commit('user/SET_AGE', res[0].data.age)
        store.commit('user/SET_SEX', res[0].data.sex)
        store.commit('user/SET_EMAIL', res[0].data.email)
        store.commit('user/SET_ROLE', res[0].data.role)

        next()
      })
    //   Promise.all([
    //     api.common.getOrganizations(),
    //     api.common.getCategories(),
    //     api.user.getUserInfo()
    //   ])
    //     .then(res => {
    //       // 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
    //       // 要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法
    //       store.commit('common/SET_ORGANIZATIONS', res[0])
    //       store.commit('common/SET_CATEGORIES', res[1])
    //       store.commit('user/SET_USERID', res[2].user_id)
    //       store.commit('user/SET_USERNAME', res[2].user_name)
    //       store.commit('user/SET_ROLE', res[2].role)
    //       store.commit('user/SET_USERICON', res[2].icon)
    //       if (res.organization) {
    //         store.commit('user/SET_ORGANIZATION', res[2].organization)
    //       }
    //       next()
    //     })
    //     .catch(error => {
    //       console.log(error)
    //       store.dispatch('user/logOut').then(() => {
    //         next({ path: '/' })
    //       })
    //     })
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
    }
  }
})

在main.js中添加

import store from './store'

目录结构如下：