标签：异步 await state promise 路由 async vuex store
vue权限控制路由
用户登录后返回权限菜单，前端根据权限菜单动态添加路由，然后再动态生成菜单栏
思路是
- 在router.js中定义初始化默认路由
- 动态配置路由
- 通过匹配，把匹配好的路由数据addRoutes到路由中
- 为了防止刷新后路由数据被清空，可以用判断是否登录的方式再次加载动态路由
vuex
- store文件夹下心间js文件
- js文件中引入vue和vuex，完了在main.js中把store引入进来
- state 用来自定义一些变量保存数据
- mutations用来定义一些方法，用户通过调用这些方法来改变数据，可传一个参数或者两个，第一个参数state是默认的，第二个参数就是用户传入的值，然后在方法中赋值给state中的变量。
- getter:从基本数据state派生出来的数据，相当于store的计算属性，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
- action提交的是mutation,而不是直接变更状态
- modules:模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，管理更为方便。
存值。需要把当前的数据保存到vuex中
- 同步
this.$store.commit("mulations中的方法名"，数据值) - 异步用
this.$store.dispatch("actions中的方法名"，数据值)
取值
- 同步
this.$store.state.方法名 - 异步
this.$store.getter.方法名
当操作行为中含有异步操作，比如向后台发送请求数据，就需要使用action的dispatch来完成了，其他使用commit即可。
promise
promise对象表示一个异步操作，有三种状态pending(进行中)、fufilfed(已成功)、rejected(已失败)。只有异步操作的结果才能决定当前是哪一种状态，任何操作都无法改变这种状态。
一旦状态改变就不会再变，任何时候都可以得到这个结果。promise对象的状态改变，只有两种可能：从pending变成fufilfed和从pending变成rejected。只要这两种情况发生，状态就凝固了，不会再变了，这时就称为resolved(已定型)。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果。
async await
async await基本是组合使用的 async用来声明一个异步方法，返回的是一个promise对象，获取对应的返回值需要用到.then方法。
await只能在async里面使用，让后面的执行要等到当前await方法的结果后才能继续执行。
标签：异步,await,state,promise,路由,async,vuex,store 来源： https://www.cnblogs.com/zhangkeke/p/15596673.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。