vuex promise async await(vuex promise async await)

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方法的结果后才能继续执行。

————————

Vue privilege control routing

After logging in, the user returns to the permission menu. The front end dynamically adds routes according to the permission menu, and then dynamically generates the menu bar
The idea is

  • Define and initialize the default route in router.js
  • Dynamically configure routing
  • Through matching, the matched route data is added to the routes
  • In order to prevent the route data from being cleared after refresh, you can load the dynamic route again by judging whether to log in

vuex

  • JS files in the store folder
  • js文件中引入vue和vuex,完了在main.js中把store引入进来
  • State is used to customize some variables to save data
  • Changes is used to define some methods. Users can change data by calling these methods. One or two parameters can be passed. The first parameter state is the default, and the second parameter is the value passed in by the user, and then assigned to the variable in state in the method.
  • Getter: the data derived from the basic data state is equivalent to the calculation attribute of the store. The return value of getter will be cached according to its dependency, and will be recalculated only when its dependency value changes
  • The action submits the mutation instead of directly changing the state
  • Modules: modular vuex, which allows each module to have its own state, mutation, action and getters, making the structure very clear and management more convenient.

Save value. You need to save the current data to vuex

  • 同步
    this.$store.commit(“mulations中的方法名”,数据值)
  • 异步用
    this.$store.dispatch(“actions中的方法名”,数据值)

Value

  • 同步
    this.$store.state.方法名
  • asynchronous
    This. $store. Getter. Method name
    When the operation behavior contains asynchronous operations, such as sending request data to the background, you need to use the action dispatch to complete it, and others can use commit.

promise

The promise object represents an asynchronous operation. There are three states: pending, completed, and rejected. Only the result of asynchronous operation can determine the current state. No operation can change this state.
Once the state changes, it will not change again. This result can be obtained at any time. There are only two possibilities for the state of the promise object to change: from pending to filled and from pending to rejected. As long as these two situations occur, the state solidifies and will not change again. At this time, it is called resolved. If the change has occurred, you can add a callback function to the promise object and get the result immediately.

async await

Async await is basically used in combination. Async is used to declare an asynchronous method and return a promise object. The. Then method is required to obtain the corresponding return value.
Await can only be used in async, so that subsequent execution can not continue until the result of the current await method.