vuex的基本使用

        vuex的基本作用，

        将数据进行暂存处理，实现数据的全局存读取

        缺点：

        数据是暂存数据，刷新页面即消失

        处理方法：

        引入vuex-persistedstate，他能将数据存储到localStore中(key为vuex)，刷新页面，数据仍然存在

使用方法：

        安装vuex、vuex-persistedstate

        npm i -S vuex vuex-persistedstate

        Ps：引入vuex之后，使用的是其中的Store部分，所以引入方法

import Vue from 'vue'
// 引入vuex、vuex-persistedstate
import Vuex from 'vuex'
import persistedstate from 'vuex-persistedstate'

// 全局引入
Vue.use(Vuex)

import common from './common'

const store = new Vuex.Store({
    // vuex的插件的注册
    plugins: [
        persistedstate({})
    ],
    // 模块化之后引入
    modules: {
        common
    }
})

// 导出，给最顶层的main.js调用
export default store

        公共样式common文件写法

// 待储存的数据
const state = {
    token: '',
    userInfo: ''
}

// 用于获取数据
const getters = {
    // 两种写法皆可，一种是se6箭头函数简写renturn，一种是传统写法
    token: state => state.token,
    userInfo(state) {
        return state.userInfo
    }
}

// 可执行异步方法
const actions = {
    userInfoAct({commit}, userInfo) {
        commit('mutationUserInfo', userInfo)
    }
}

// 用于储存数据方法，调用规则commit(变量，更改值)
const mutations = {
    // 改变token值的方法
    mutationToken(state, token) {
        return state.token = token
    },
    mutationUserInfo(state, userInfo) {
        return state.userInfo = userInfo
    }
}

// 导出数据给上级
export default {
    // 定义自定义命名空间是否开启
    namespaced: true,
    // 数据
    state,
    getters,
    actions,
    mutations
}

        使用方法(以token为例子)

        获取值的话，this.$store.getters['common/token']

        修改值，this.$store.commit['common/mutationToken',修改成的值]

        注意：开启命名空间之后不能用.进行调用，要用中括号而且要加上命名空间