持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天
Vuex
Vuex通俗来讲，就相当于创建了一个全局对象，让各个相互独立的组件都可以响应式地访问到这个对象中的变量，起到变量共享的效果
Vuecli2中默认不安装Vuex，需要自己安装，我这里指定版本3.0.1
npm install Vuex@3.0.1 --save
安装成功后，自己完成vuex的配置，与路由配置相似，在src文件下创建store文件夹，在store文件夹下建立index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
getters: {
},
modules: {
}
})
之后在入口文件main.js中挂载一下即可
import Vue from 'vue'
import App from './App'
import store from '@/store/index.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
render: h => h(App)
})
在state对象中，我们就可以定义自己要共享的状态（变量），在组件中可通过$store.state.paramName来获取
在我们需要处理state对象中的数据时，建议不要在组件中直接处理，因为当多个组件同时共享数据时，组件对数据的改动无法追踪，后续调试很痛苦
根据官方的建议，我们最好将处理信息分发(Dispatch)给Actions，再由Actions提交给Mutations来处理数据，这样方便使用Devtools（浏览器调试工具）进行后续调试，当我们不需要处理异步事件时，可绕过Actions直接提交至Mutations中处理
举例：我们在vuex中定义变量与方法
state: {
message: 'HelloVuex!!'
},
mutations: {
//调用时state会自动传入，不用手动传
sayHello(state){
state.message += 'HelloVuex!!';
}
},
要想在组件中调用方法，需要用$store的commit方法进行提交：
<button @click="$store.commit('sayHello');">sayHello</button>
Devtools
在edge浏览器右上角三个点，点开后选扩展，点击里面管理扩展 -> 获取 Microsoft Edge 扩展，搜索Devtools，找到对应项下载即可使用（不起效果的话重启浏览器）
f12检查，选择vue选项，即可打开devtools界面
