vuex的简单使用

项目结构

一、创建store

创建分割成模块（module）的state

项目代码中创建store文件夹，同时创建index.js，在modules中定义userInfo这个state

index.js

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);

import userInfo from './modules/userInfo.js';//引入某个store对象


//store对象模块
export default new vuex.Store({
  modules: {
    userInfo: userInfo,//用户组件
  }
})

在store文件夹创建moudle文件夹，用于存放不同模块的state，下面创建userInfo.js这个state，state里面可以定义属于该state的getter、actions、mutations等函数

userInfo.js

// initial state
const state = {
  userId:'',//用户id
  userName:'',//用户名称
  token:'',//token
  permission:''//权限
}

// getters
const  getters = {
  // 获取用户信息
  getUserInfo(){
    return state;
  }
}

// actions
const actions = {}

// mutations
const mutations = {
  updateUserInfo(state,payload) {
    state = payload;
  }
}

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

二、把创建store引入到main.js中

先导入store

import store from './store/index' //引入store

完整代码

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import store from './store/index' //引入store

Vue.config.productionTip = false

Vue.use(Element, { size: 'small', zIndex: 3000 })

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