import * as types from '../mutation.types' import * as http from '../../api/http' // import _ from 'lodash' const state = { userinfo: JSON.stringify(localStorage.getItem('userinfo') || {}) } const actions = { setUserInfo ({ commit }, userinfo) { localStorage.setItem('userinfo', userinfo) commit(types.SET_USERINFO, userinfo) }, login ({dispatch, commit, getters}, plyload) { return http.get('/user/caiya', {}) } } const mutations = { [types.SET_USERINFO] (state, userinfo) { state.userinfo = userinfo }, [types.LOGOUT] (state) { localStorage.setItem('userinfo', '') state.userinfo = '' } } const getters = { logined (state) { return state.userinfo !== '' && state.userinfo !== '{}' }, userinfo (state) { if (state.userinfo !== '' && state.userinfo !== '{}' && typeof state.userinfo === 'string') { return JSON.parse(state.userinfo) } else if (typeof state.userinfo === 'object') { return state.userinfo } return null } } export default { state, actions, mutations, getters }

每个module都有相应的四个组成部分，分别定义如上，然后再在index.js中配置出该模块：

import Vue from 'vue' import Vuex from 'vuex' import user from './modules/user' Vue.use(Vuex) export default new Vuex.Store({ modules: { user } })

最后再将该store配置到全局的vue实例中：

2、actions

actions接收键值对函数，该函数第一个参数为vuex的context对象，其中包括dispatch、commit、getters对象函数，通过ES6结构的方式可以直接取到：

然后可以直接进行相关操作，也可以在此将payload数据commit到mutation中在此进行处理。

3、mutation

mutation一般用来对state中的数据进行修改操作，其中第一个参数为state对象，后面参数不定，均为action传过来的参数或者页面通过dispatch直接传过来的参数

4、getters

可以看到getters其实就是用来过滤处理state中的数据的，每个getters函数第一个参数为当前module下的state对象，定义好getters后组件中直接获取getters即可获取到state中的过滤后的数据：

5、最后看下要操作的state

其实state就是json对象，用来保存任意状态的：

6、组件辅助函数

辅助函数是干嘛的呢，比如之前我们定义好的action、mutation、getters、state后，在组件中想使用他们要怎么做呢？必须使用this.$store.getters.xxx来获取getters xxx，要调用action必须使用this.$store.actionName来调用，mutation同理，获取state要使用this.$store.state.moduleName.stateName获取指定moduleName下的stateName这个state数据，这样调用比较麻烦，所以辅助函数就出现了。

比如我们Login.vue组件需要调用actions中的Login方法，如下：

同样地方式我们可以这样直接调用mutation：

再来看个getters的：

四、axios

axios是一个http请求包，类似于vue-resource（该包已停止维护），vue官网推荐使用axios进行http调用，因为axios压缩后体积更小，支持restful方法调用，关于axios的使用看如下代码，其中有详尽介绍：

import axios from 'axios' axios.defaults.baseURL = 'https://cnodejs.org/api/v1' // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' const ACCESS_TOKEN = 'accesstoken=ed20aac8-9fd8-45bf-8112-62fd2425b4a5' // 添加请求拦截器 axios.interceptors.request.use(config => { // 在发送请求之前做些什么 config.url = `${config.url}?${ACCESS_TOKEN}` return config }, error => { // 对请求错误做些什么 return Promise.reject(error) }) // 添加响应拦截器 axios.interceptors.response.use(response => { // 对响应数据做点什么 return response }, error => { // 对响应错误做点什么 return Promise.reject(error) }) export function fetch (url, params) { return new Promise((resolve, reject) => { axios.post(url, params).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } export function get (url, params) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(res => { resolve(res) }).catch(err => { reject(err) }) }) }