1、安装

npm install vuex --save

2、在/src下新建文件夹store

3、新建modules文件夹，进行分类管理，不然太过于臃肿

4、新建app.js

const app = {
  state: {
    // 导航按钮
    sidebar: {
      opened: !+localStorage.getItem('sidebarStatus')
    },
    baidupush: +localStorage.getItem('baiduStatus'),

  },
  mutations: {
    TOGGLE_SIDEBAR: state => {
      if (state.sidebar.opened) {
        localStorage.setItem('sidebarStatus', 1)
      } else {
        localStorage.setItem('sidebarStatus', 0)
      }
      state.sidebar.opened = !state.sidebar.opened
    },
    TOGGLE_BAIDU (state, size) {
      let sizes = size ? 1 : 0
      localStorage.setItem('baidupush', sizes)
      state.baidupush = size
    }
  }
}
export default app

5、新建user.js

const user = {
  state: {
    token: localStorage.getItem('token'),
    username: localStorage.getItem('username')
  },
  mutations: {
    BIND_LOGIN: (state, data) => { //登录
      localStorage.setItem('token', data)
      state.token = data
    },
    BIND_LOGOUT: (state) => {//登出
      localStorage.removeItem('token')
      state.token = null
    },
    SAVE_USER: (state, data) => {//用户名
      localStorage.setItem('username', data)
      state.username = data
    }
  }

  // actions: {
  //   bindLogin({ commit }, data){
  //     commit('BIND_LOGIN', data)
  //   },
  //   bindLogout({ commit }){
  //     commit('BIND_LOGOUT')
  //   },
  //   saveUser({ commit }, data){
  //     commit('SAVE_USER', data)
  //   }
  // }
}

export default user

6、在store下新建getters.js，主要是计算属性，计算结果会被缓存！只有

const getters = {
  token: state => state.user.token,
  username: state => state.user.username
}
export default getters

7、新建index文件，用于引用

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import app from './modules/app'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user,
    app
  },
  getters
})

export default store

8、引用方式,首先在main.js中引入

import store from './store/index'

9、在vue中使用

import { mapMutations, mapState } from 'vuex'
computed: {
    ...mapState({
      tokens: state => state.user.username,
      basecolor: state => state.app.basecolor,
      isActive: state => state.app.sidebar.opened
    })
  },
   methods: {
    ...mapMutations({
      bindxh: 'TOGGLE_SIDEBAR'
    })
  },

这样就可以直接在vue中用this.tokens使用