vuex 相关笔记

目录：

//import store from './store/store' //小项目用这个
import store from './store/index' //中大项目用这个

**小项目一个文件
store.js**

import Vue from 'vue';
import Vuex from 'vuex';
import $axios from "axios"
import url from '@/router/url'
import { Message } from 'element-ui'
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
  name: "store",
  state: {
  },
  mutations: {
  },
  plugins: [persistedState()]
})

**中大项目
index.js**

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

import state from './state';
import getters from './getters';
import mutations from './mutations';
import actions from './actions';
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
  // 存储一些需要集中管理的状态(state)
  state,
  // 可以理解为`store`的计算属性
  getters,
  // 存储一些提交(commit)状态的方法
  mutations,
  // 若是异步操作更改state的在这边添加
  actions,
  plugins: [persistedState()]
})

state.js

export default {
  userInfo: {},
}

getters.js

export default {
  userInfo: (state) => {
    return state
  },
  // 在新的getters中可以使用已存在的getters
  token: (state, getters) => {
    return getters.userInfo.userInfo.token || getters.userInfo.userInfo.realName
  },
}

mutations.js

export default {
  setUserInfo (state, payload) {
    state.userInfo = payload
  },
}

actions.js

//import axios from 'axios';
export default {
  getUserInfo (context, payload) {
    context.commit('setUserInfo', payload)
    //有需要此处可以发起请求
  }
}

//往getUserInfo里面存储登录信息

this.$store.dispatch('getUserInfo', data.obj)

//全局读取

console.log('用户登录信息', this.$store.state.userInfo)
console.log('用户token', this.$store.getters.token)