在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
怎么描述这个问题呢。。。。我也知道vuex是干嘛用的，就是看文档有很多不明白的地方，总之能不能举个简单的栗子。。。
使用vuex的时候，我需要做哪些处理？vuex需要在组件内去引用？还是在main.js内引用？总之现在好乱啊。。。
跪求大神举个简单明了的代码例子
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
例子的话，vuex的github是有的。
文档的例子链接也是可以的
拿github的todomvc例子来说：你的vuex相关内容写在store里，那么把store作为根组件的一个配置参数传入
import Vue from 'vue'
import store from './store'
import App from './components/App.vue'
store, // inject store to all children
el: '#app',
render: h =& h(App)
vuex是插件，需要用到Vue.use(Vuex)可这里入口怎么没写呢？
在 store 那里写了。
import Vue from 'vue'
import Vuex from 'vuex'
import { state, mutations } from './mutations'
import plugins from './plugins'
Vue.use(Vuex)
export default new Vuex.Store({
mutations,
至于state、mutations、actions、getters那些，照着文档看看和例子看看差不多就懂了，没有什么是看一遍文档不懂的，如果有，那就看两遍~
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
this.$store.state.xxxthis.$store.dispatchthis.$store.commit
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
vuex提供了修改函数
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。Vuex新手入门指南
很多人在学习完Vue.js之后还会看到一个经常被提及的词语叫做Vuex。
Vuex字面上看与Vue.js只差了一个字母，但是他们两个做的事情完全不一样。
在本文我会像之前的 Vue.js新手入门指南文章一样的问答形式来写文章。
1.Vuex是什么？
我们还是像以往一样先看一看官方文档对此的解读（Vuex 是什么？ · GitBook）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具
devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
是不是又遇到了很多看起来很高大上听起来却一脸懵逼的专业术语？别急别急，我们慢慢来剖析一下这个Vuex究竟是个啥东西，他能做些啥。
2.Vuex到底用来做什么？
用通俗一点的话来说，Vuex就是一个用于管理SPA项目（不知道SPA是什么？请参考本专栏代码之美 - 知乎专栏中的历史文章）中状态的开源产品。
接下来又引出了一个问题，什么是状态，为什么要用Vuex这个东西去管理它？
3.什么是状态？为什么要去管理它？
状态这个东西其实我们生活中随处可见。我们头顶上的灯就有两种状态，一种是开，一种是关。状态说白了就是灯这个对象的的某个属性的值。
如果你对状态和属性这两个概念还是有所不了解，那么我打一个其他的比方吧。
我们平时是否有玩过王者荣耀或者英雄联盟LOL之类的网游？这些游戏里面每一个英雄当前都有生命值，法力值，攻击力，法术强度，护甲和魔抗等等，这些是这个英雄的属性，也就是英雄这个对象当前的状态。
属性分为固定属性和可变属性，一般像LOL里面大部分ADC英雄如果没有特殊的被动或者其他装备的支持，那么它的的攻击距离都是固定的，这个就是固定属性，这种固定属性的状态由于正常情况下都是不变的，所以我们可以直接写死在代码中（这种写死在代码中的变量的值称为硬编码），但是像其他的攻击力法术强度等等都是随装备和等级变化，那么这种属性是可变属性。
这些属性的状态由于会根据用户的各种操作（比如说出装备，打怪升级升级）变化。在传统的Vue.js的组件化开发中，一般这些状态都是分散在各个组件中，此时此刻如果两个英雄互相打起来了，那么就得分别去不同的组件中取状态值，然后进行状态值的修改，最后还要互相读取对方的状态值。如果他们本身是父子组件，那么还可以通过事件触发或者Prop属性来传递状态，但是如果是不同的组件，由于由于Vue.js本身组件之间有作用域，它们无法直接相互通信，所以就需要一些东西例如Vuex去集中管理和追踪它的变化。（如果你现在还是不明白这一大段话，可以好好回顾一下官方文档中组件 - vue.js非父子组件通信 这个部分的内容）
在游戏中，这些状态一般以变量的形式保存在内存中，但是由于用户玩游戏的时候并不是直接去使用内存管理工具查看他们在内存里面的值，而是通过游戏界面去看这些值，所以还需要像Vue.js这种MVVM框架将状态同步到视图中。这就是Vue.js和Vuex之间的关系了。
4.什么情况下我应该使用 Vuex？
官方文档（Vuex 是什么？ · GitBook）中说：
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：
Flux 架构就像眼镜：您自会知道什么时候需要它。
他的意思其实就是如果开发的程序并不是很庞大，一个页面中的组件不是很多并且他们之间并不需要大量频繁的互相读写操作，那么就可以直接使用传统的Vue.js中的组件Prop或者事件触发来修改状态，或者用组件 - vue.js#非父子组件通信 中介绍的new一个空的Vue对象实例，并且通过事件触发等方式来跨组件通信。
否则的话还是建议使用Vuex。虽然Vuex本身需要有一段时间的学习成本，但是这个学习成本相对于你开发时期使用传统非父子组件通信机制遇到的各种坑来说还是比较划算的。这个就看你自己的权衡了。
5.Vuex怎么安装和使用？
在前面讲解Vue.js入门的时候，我们用的是Vue-Cli这个脚手架工具来搭建的，由于这个脚手架工具本身会帮我们配置好npm的package.json文件，这个文件里面包含了这个Vue.js项目中所有依赖的包。
但是默认情况下这个脚手架工具没有为我们将Vuex这个依赖包给包含进去，所以我们得自己去“声明”一下我们这个Vue.js项目中需要依赖Vuex这个包。
我们该怎么“声明”呢？现在有两种办法：
一种是直接修改package.json，这种方法看起来有点复杂，很多新手怕一不小心修改出错，可能会导致整个package.json文件结构出错，影响以后项目的依赖安装。
还有一种方法比较安全，只需要一行命令：
npm install vuex --save
表示安装vuex这个包，--save表示将这个依赖包与本项目的依赖关系写入package.json中。
然后我们仅仅安装了这个依赖包是没有用的，我们还得在之前Vue-Cli为我们自动构建好的项目文件中的main.js主入口文件的开头里面加上两行这样的代码：
import Vuex from 'vuex'Vue.use(Vuex)
第一行是用ECMA6的import将vuex包导入进来（这个是不是和java中导入jar包以及php中导入命名空间很相似？）
第二行是Vue.js本身的插件注入语法（参考官方文档插件 - vue.js），将插件注入Vue.js的目的是方便我们在插件内部调用它。
6.官方文档的五大核心概念是什么？
打开官方文档（Introduction · GitBook）能看到五大核心概念，他们都是啥？看了半天官方文档我还是对它们没什么了解，楼主能不能以通俗易懂的方式讲解一下它们的作用？当然可以啦！
首先先看一遍这个代码，不需要你看懂它。
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }})7.State（状态）
官方文档：State · GitBook
这个状态就是前面所介绍的“状态”值的存放处。
看第6节末尾的代码中，状态就是在state属性中以键值对的形式声明这个SPA中所有的状态。上面的代码中声明了一个count状态。
之所以要在这里声明所有状态的原因，一是让代码更加优雅，如果你接手你同事的项目的时候，能够一眼从Vuex的状态声明中看出这个应用中有哪些状态，肯定开发效率杠杠滴。二是如果在这里声明了状态，那么Vuex就能够追踪到这个状态的变化。那么Vue.js中就可以在视图中对这个状态做出响应。
读取状态当然也是直接读取这个属性里面的各种子属性了。
8.Getter（获取器）
官方文档：Getters · GitBook
这个获取器和一些后端开发中模型层ORM中的获取器其实是差不多的功能。
比如说后端返回给我们的是一个int类型的时间戳，我们想把这个时间戳转换成正常人类可读的文本型时间表现形式（比如说日 12:43:31），那么我们就得在所有获取该状态的代码中增加一个转换函数。
可是现在有了状态获取器之后，我们可以统一将这个时间戳转字符串的函数写在获取器里面，要调用的时候就直接调用获取器就好了。
还有一些其他场景也可以使用获取器，比如说像错误码这种东西一般都是一个数字码对应一个文字形式的错误原因，我们也可以通过获取器来实现通过错误码拉取错误原因的功能。
使用获取器的方法则是直接调用Vuex实例的getter下的各种函数即可。
9.Mutations（转变）
官方文档：Mutations · GitBook
这个Mutations其实国内目前也没有比较好的翻译，通常我们都是直接称Mutations。
我们前面只讲了可以通过调用Vuex的实例的state属性或者getter获取器来读取状态。但是没讲到如何修改状态。
官方文档中已经讲了需要先在Vuex实例的Mutations下编写对应的修改函数来修改状态。并且要修改的时候，要通过Vuex实例的commit方法来提交修改。也就是说任何对state状态的修改操作都必须写在Mutations中，并且还得用Vuex实例的commit来提交修改操作，并且由于Mutations函数可以传入参数，所以commit同理也可以传入参数。
这个时候可能有一些同学就会提问了，前面既然讲到了读取可以直接访问Vuex实例的state属性，为什么修改却不能直接去操作Vuex实例的state呢？官方文档和其他高手的回答是：
再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。
相当于我们通过一个Mutations函数可以显式的在代码中告诉开发者，我们这个SPA中究竟会对状态进行哪些操作，操作方式是什么。并且在后期我们使用一些辅助开发工具，可以保存状态的快照，就像git或者svn一样可以回滚状态。如果你还是有点不明白，总之你就按照官方文档说的去做吧，等开发一段时间之后会慢慢明白作者的良苦用心的，哈哈。
还有一个问题就是为什么状态修改的提交必须通过Vuex实例的commit方法提交呢？为什么不能直接调用Mutations函数呢？除了上面官方文档中提到的原因，网上还有高手解释了：因为Vue.js的状态修改其实是在内部有一个修改队列，通过commit的方式提交修改可以保证状态的修改是有序的。
10.Actions（动作）
官方文档：Actions · GitBook
前面提到了Mutations中可以对状态进行操作，但是忘记告诉各位同学，Mutations中对状态的操作只能是同步操作，不能是异步操作。
如果这个时候我们有一个对状态的修改操作是异步的怎么办呢？
首先看看什么是异步操作？比如说ajax就可以选择是否发起异步请求，发起异步请求之后，我们就需要在回调函数里面进行请求结果的处理。关于Java异步的知识大家可以先使用各种搜索引擎自学一下。
现在回到actions上来，看看官方文档（Actions · GitBook）：
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
其实异步的状态修改本质上还是通过几个同步操作组合的，所以我们还是得先声明好mutation同步操作方法，然后在actions中进行异步操作。如果我们暂时手头上没有ajax接口用于异步请求，那么我们可以像官方文档一样用setTimeout这种最简单的测试方法来理解。
actions: { incrementAsync ({ commit }) { setTimeout(() =& { commit('increment') }, 1000) }}
前面讲到了mutation是用commit来提交操作的，那么actions是怎么提交的呢？官方文档中说了actions是使用Vuex实例的dispatch方法来提交（其实说分发会更加准确）的。
至于其他更详细的actions操作官方文档讲的还是比较清楚的，没有什么比较复杂的概念，可以参考官方文档学习，这里不做更多讲解。
至于后面“组合actions”中提到的Promise对象以及 async / await 都是Java中的一些特性，大家可以利用搜索引擎进行更多了解。
11.Modules（模块）
官方文档：Modules · GitBook
如果你的SPA项目非常的庞大，那么状态可能本身还需要进行分模块分类管理，这个时候就需要用到模块了。官方文档中已经给出了比较详细的模块操作代码，这里不再做更多讲解。
至于前面在将actions的时候，官方文档中说actions方法在声明的时候需要带上一个context参数，原因在这里可以得到解答：
对于模块内部的 action，context.state 是局部状态，根节点的状态是 context.rootState
12.严格模式
官方文档：严格模式 · GitBook
在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
前面提到了state的修改需要通过提交Mutations或者分发Actions，但是事实上我直接修改state可以吗？当然也是可以的，但是在开发阶段，为了尽可能防止开发者直接修改，就可以通过严格模式来检测这种错误的修改方式，并且抛出异常。
但是官方文档后面也提到了：
不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。
因此不要在生产环境下开启严格模式导致性能损失。
Vuex综合来看是一个非常适合在Vue.js中使用的状态管理工具，当然类似的状态管理工具也有很多，比如说React的Redux。
但是我们为了能够尽可能保证项目稳定性以及学习曲线的平滑，推荐在Vue.js中使用Vuex。
其实文章中也还有很多细节部分没有讲到，这些细节官方文档的说明还是比较通俗易懂这里就不做更多搬运来凑字数。当然后面也有热重载，测试等方面由于楼主自己的项目中也未使用过，所以不敢留有更多笔墨，还等楼主继续探索实践才能写出更多好文章。
作者：昌维
via：https://zhuanlan.zhihu.com/p/
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点VueX中状态管理器的应用
原创
 10:05:03
662
这篇文章给大家介绍的内容是关于VueX中状态管理器的应用，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。VueX状态管理器cnpm i vuex axios -S
1 创建Vuex 仓库
import Vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new VueX.store({
state: {//存放状态}，
mutations:{//唯一修改状态的地方，不在这里做逻辑处理}
export default store
2 在入口文件main.js下引入store
import store from './store/index.js'
将store 放到根实例里
以供全局使用
el:'#app',
components:{App},
template:&App/&
开始使用store(以home组件为例)Vuex的使用也是一种渐进式的，你可以从最简单的开始使用，根据经验和技术的增加，再渐进增强对它的使用，如果按照级别算vuex的使用可以从最基本的t1级别开始，先总结最基本的前三个版本，后续有时间再总结其他的。T1级别1.
在hoome/script.js中进行请求数据
import Vue from 'vue'
import axios from 'axios'
export default {
mounted(){
axios.get('请求数据的接口')
.then((res)=&{this.$store.commit('changeList',res.data)})
//changeList相当于调用了在store.mutations中定义的修改状态的方法
//res.data
就是在改变状态时要修改的数据，需要在这传递过去。
.catch((err)=&{console,log(err)})
在store/index.js中定义
import Vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new VueX.store({
//存放状态
//存放一个空的数组
mutations:{
//唯一修改状态的地方，不在这里做逻辑处理
//定义一个修改list的方法
//state 指上面存放list的对象，data 为在请求数据出传过来请求到的数据
changeList (state，data) {
state.list = data
//将请求来的数据赋值给list
export default store
在home/index.vue中渲染
&template&
//渲染数据的时候通过this.store.state.list直接从store中取数据
//还可以从其他组件通过这种方法去用这个数据无需重新获取
&li v-for='item of this.store.state.list' :key='item.id'&{{item.name}}&/li&
&/template&注意点：如果我们在home组件中获取的数据，可以在其他组件中使用，但是是当页面刷新默认进入home页，也就是相当于修改了数据，再点击其他页面也能有数据。如果我们在user组件中获取的数据要在home组件中使用，当页面刷新数据是不会显示的，因为此时还没有触发user组件中的更改数据的方法，所以数据为空，当点击user页面时，就会有数据，这个时候再去点击home页面我们就能够看到在home 组件中使用user组件中获取的数据了。解决这种问题的办法可以将数据存到本地一份或者都在首页进行请求数据T2级别在页面进行渲染的时候我们需要通过this.store.state去拿数据，这样的写法太长而且不太好用计算属性结合mapState去解决这个问题1
在home/script.js中进行操作
import Vue from 'vue'
import mapState from 'vuex'
import axios from 'axios'
export default {
computed:{
//mapState为辅助函数
...mapState(['list'])
mounted(){
axios.get('请求数据的接口')
.then((res)=&{this.$store.commit('changeList',res.data)})
.catch((err)=&{console,log(err)})
在home/index.vue中渲染
&template&
&li v-for='item of
list' :key='item.id'&{{item.name}}&/li&
&/template&T3级别使用常量去代替事件类型(便于查看状态，利于维护)
在store下创建mutation-type.js
export const
CHANGE_LIST = 'CHANGE_LIST'
在store/index.js引入mutation-type.js
import Vue from 'vue'
import Vuex from 'vuex'
import {CHANGE_LIST }
from‘./mutation-type.js’
vue.use(Vuex)
const store = new VueX.store({
//存放一个空的数组
mutations:{
//我们可以使用Es6风格的计算属性命名功能来使用一个常量作为函数名
[CHANGE_LIST] (state，data) {
state.list = data
//将请求来的数据赋值给list
export default store
在home/script.js中进行引入
import Vue from 'vue'
import mapState from 'vuex'
import axios from 'axios'
import {CHANGE_LIST} from ‘../../store/mutation-type.js’
export default {
computed:{
//mapState为辅助函数
...mapState(['list'])
mounted(){
axios.get('请求数据的接口')
.then((res)=&{this.$store.commit(CHANGE_LIST,res.data)})
.catch((err)=&{console,log(err)})
}相关文章推荐：以上就是VueX中状态管理器的应用的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
点击数(110678)
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
点击数(108562)
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
点击数(83361)
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
点击数(82540)
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
点击数(79780)
全栈工程师
文章总浏览数
相关视频章节Vue学习之父子组件通讯,Vuex与购物车修改删,导航守卫解决权限路由问题详解
父子的通讯
1.父组件通过prop向下传递,&
接收方,子组件中声明props props:['goodsId',goodsCount]
传值方,父组件&
导入子组件import inputnumber from '..'
template中使用 &inputnumber :goodsId=&& :goodsCount=&& /&&
在components中注册
2.子组件通过事件向上传递&
接收方,父组件中写好v-on监听事件,并写好处理函数@countChange=&getChangeCount&&
把子组件的数量赋值给父组件数量getChangeCount(goods){}形参接收子组件传递的数据
传值方,子组件使用$emit()触发事件,传递payLoad this.$emit('countChange',goods)
payLoad{goodsId:&87&,goodsCount:2}
vuex 的使用
什么是vuex? 可理解为仓库,专门为vue.js开发的状态(数据)管理模式
跨组件通讯,多个组件都需要操作一个数据
使用: 1.安装; 2.导入,Vue.use();3.const store = new Vuex.Store()创建一个仓库对象; 4.注入到根实例,就有全局状态管理功能
state 仓库中的数据 buyCount:0
getter 仓库中获取数据 模板中{{this.$store.getters.getBuyCount}}
mutation 同步的方式操作数据的增删改
action 异步的方式操作数据的增删改
module 需要创建多个仓库时
购物车的数量修改
1.利用计算属性原理,父子组件的修改数量,实现页面总数和总金额的同步;
2.更新全局的buycount (用vuex);&
shopcart.vue&&main.js的mutations中的updateGoods方法,在updateGoods中&&localStorageTool中updateLocalGoods方法
上面方法更新完毕后 将localStorage中最新的值返回给vuex中的buyCount(自动更新app.vue中的购物车总数)
3.更新localStorage中的id和数量;
对象的增加和改值方法&
* var obj=[&89&:2,&88&:3]&
* 改值 obj[&89&]=5 //[&89&:5,&88&:3] 存在key就是改值&
* 增加 obj[&78&]=2 //[&78&:2,&89&:5,&88&:3] 不存在key就增加&
* 删除 delete obj[key];
删除购物车商品(同修改购物车商品数量)
shopcart.vue中添加点击事件deleteGoodsById, 传入item.id @click=&deleteGoodsById(item.id)&
main.js中调用mutations中deleteGoods方法
localStorage中deleteLocalGoods方法
返回vuex中最新的buyCount值
生命周期钩子函数
created 组件创建完毕
mounted 组件渲染完毕 (通常需要增加延时setTimeOut)
updated 数据更新时
声明式 式导航(路由)
声明式 &router-link to...& 写在组件模板template中
编程式 router.push(...) 写在js中 通过this.$router.push(&)来触发路径
route和route和router区别:route:获取路径中得参数;route:获取路径中得参数;router:编程式导航
导航守卫解决权限问题
进入到需要权限的组件(order.vue),首先判断是否登录,如果登录,就跳转到订单详情页面;没有登录,跳转到登录页面,登录成功后跳转到目标页面;
需要解决以下几个问题?
1.对所有路由进行拦截&
导航守卫实质是一个函数,当我们有路由切换时,就会调用该函数
2.判断是否登录; 已经登录,跳转到订单详情页面;否则跳转到登录页面,登录成功后跳到目标页面
const router = new VueRouter({})
router.beforeEach((to, from, next) =&{} 每次路由切换时会触发&
to:Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: 决定你是否能继续往下走，可以理解成是一个开关
meta: { requiresAuth: true }给路由规则添加额外条件 判断是否需要权限
to.meta.requiresAuth判断是否直接next(),&
如果不是, 判断是否登录,没有登录next('/login') ;已经登录next()
登录组件(main.js中需要设置开启cookieaxios.defaults.withCredentials=)
获取表单输入的内容
返回数据发送bus.$emit('isLogin',true)
App.vue中获取bus.$on('isLogin',function(isLogin){})
提交get请求
this.isLogin=false
this.$router.push{path:'/goodslist'}回到商品列表
非父子组件通讯 (login.vue 和 App.vue)
创建新的的Vue 作为事件的总线(公共的Vue对象)
// 触发组件 A 中的事件 (发送方login.vue)&
bus.$emit(&id-selected&, 1)
// 在组件 B 创建的钩子中监听事件 (接收方App.vue)&
bus.$on(&id-selected&, function (id) {&}