全局状态管理

说明

vuex 官方文档 (opens new window)，在阅读本文档前，请对 vuex 的使用有一定了解。

目录结构

└─ src
   └─ store
      ├─ modules                # 模块
      │  ├─ actor.js            # 影人信息
      │  ├─ movie.js            # 影视信息
      │  └─ user.js             # 用户信息
      └─ index.js               # 入口

入口文件

import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'       // 我的信息
import movie from './modules/movie'     // 当前影视信息
import actor from './modules/actor'     // 当前影人信息

Vue.use(Vuex)

export default new Vuex.Store({
	modules: {
		user,
		movie,
		actor
	}
})

我的信息

以下介绍我的信息 vuex 文件

// 引入登录相关接口文件
import { register, getUserToken, getUserInfo } from '@/api/user'

// 默认状态值
const state = {
  token: localStorage.getItem('token') || '',
  user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null,
}

// 获取状态值
const getters = {
  getUser: state => state.user,
  getToken: state => state.token
}

// 同步更新状态
const mutations = {
  // 身份token
  SET_TOKEN: (state, token) => {
    state.token = token
    localStorage.setItem('token', token)    // 
  },
  // 用户信息
  SET_USER: (state, user) => {
    state.user = user
    localStorage.setItem('user', JSON.stringify(user))
  },
}

// 异步提交 mutations 更新状态
const actions = {
  // 用户注册
  async register({ commit }, form) {
    const { account, password, code } = form

    let res = await register({ account, password, code })

    if (res.code === 200) {
      commit('SET_TOKEN', res.data.token)
    }
    return res
  },

  // 用户登录
  async login({ commit }, form) {
    const { account, password } = form

    let res = await getUserToken({ account, password })

    if (res.code === 200) {
      commit('SET_TOKEN', res.data.token)
    }
    return res
  },

  // get user info
  async getInfo({ commit }) {

    const res = await getUserInfo();

    if (res.code === 200) {
      commit('SET_USER', res.data)
    }

    return res
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}