一、技术概述
这个技术是做什么？学习该技术的原因，技术的难点在哪里
数据要全局显示的工具。Vuex应用的核心就是store（仓库）,当Vue组件从store中读取数据的时候，若数据发生变化，那么相应的组件也会相应地得到高效更新。
2、技术详述，描述你是如何实现和使用该技术的，要求配合代码和流程图详细描述。
1、首先，我们需要声明一个store的index.js文件：
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
// import tagsView from './modules/tagsView'
import user from './modules/user'
import permission from './modules/permission'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
// tagsView,
user,
permission
},
getters
})
export default store
2、在modules文件夹下，存储的相关数据类型：
state: {
//这里放全局参数
},
mutations: {
//这里是set方法
},
getters: { //这里是get方法 },
actions: {
//action 属性内，可以定义异步操作逻辑，以满足某些业务场景要求
},
modules: {
//为了给全局变量分组，所以需要写提前声明其他store文件，然后引入这里
}
3、定义一个getters.js文件将访问的属性export
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.username,
nickname: state => state.user.nickname,
userId: state => state.user.userid,
email: state => state.user.email,
major: state => state.user.major,
slogan: state => state.user.slogan,
phone: state => state.user.phone,
roles: state => state.user.roles,
permission_routes: state => state.permission.routes
// visitedViews: state => state.tagsView.visitedViews,
// cachedViews: state => state.tagsView.cachedViews
}
export default getters
4、可以在Vue中通过
this.$store.getters.userId
就可访问到全局变量userId。
三、技术使用中遇到的问题和解决过程。
在vuex.store中
state属性是用来定义公共变量的
mutations属性，在state中的变量只能在mutations通过方法修改
action属性，定义异步操作。
getters属性，可获取返回值，或者函数
在store中修改全局变量的方法需要调用函数commit才能够修改值
具体的调用方法是：store.commit(调用的函数，参数)
四、进行总结
如果不只用Vuex.store可能会带来一下问题
1、可维护性会下降，你要想修改数据，你得维护三个地方
2、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
3、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。