Vue-cli项目搭建（vuex使用）

配置好了axios 我们需要配置vuex
涉及到登陆注册之类的我们需要用vuex来进行状态管理。
如果你没有安装vuex 可以使用

npm i vuex -S

可以现在src的目录下创建store文件夹
在文件夹下创建。
index.js getter.js mutations.js actions.js
是因为 vuex 是分为这四个部分我们进行分别管理
在index.js 中要把他们全部引用并且导出
index.js代码

import Vue from 'vue'
import Vuex from 'vuex'
import states from './states'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
Vue.use(Vuex)

export default new Vuex.Store({
  states,
  mutations,
  getters,
  actions
})

states.js 由于我要进行登陆的操作所以可以涉及到一写数据

export default {
  isLogin: JSON.parse(window.localStorage.getItem('token')) ? 1 : 0,
  username: '',
  avatar: ''
}

mutations.js

export default{
  login (state) {
    if (JSON.parse(window.localStorage.getItem('token'))) {
      state.isLogin = true
    } else {
      state.isLogin = false
    }
  },
  logout (state) {
    state.isLogin = false
    window.localStorage.removeItem('token')
  },
  hasLogin (state, res) {
    state.username = res.data.data.nickname
    state.avatar = res.data.data.avatar
  }
}

另外两个页面暂时还没有用到 。就 不谢代码了

现在我们写完store 里的东西需要用到main.js
中

import Vue from 'vue'
import App from './App'
import router from './router'
import $http from './request'
import store from './store'

Vue.config.productionTip = false
Vue.prototype.$http = $http

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

这样vuex就可以使用了。
如果你先引用vuex 的数据你可以直接 按需引入

import {mapState, mapMutations} from 'vuex'
export default {
  name: 'Login',
  computed: {
    ...mapState(['isLogin'])
  },

简单的应用基本就是这样了诶过有问题可以咨询 QQ 7764247