zoukankan      html  css  js  c++  java
  • vuex中用法值得注意的地方

    什么地方用vuex:

    1.全局的数据,不如用户信息,很多组件都可能用到,为了方便交互,所以用vuex

    2. 变化的频率低的数据,比如网站的icon图标,轮播图,而不是消息评论等。

    mutation:突变,变异。

      为什么要由mutation,是因为要对state,也就是状态的变化,进行监控。

      在组件中不能随意直接更改state,这样直接改的状态监控不到,要把改变state的所有方法固定下来,全部放到store的mutation中这是改变状态的唯一途径

    mutations的参数:
    • statte:状态,
    • payload:负荷
    触发方法: 用$store.commit('mutation名称',payload)

      mutations里的操作,严禁由异步代码,比如网络请求,定时器,promise,因为函数执行完就被记录,后来的异步代码执行过程不会被记录到。

    actions

      专门处理异步代码的,异步中commit,然后达到改变state的目的

      因为actions是异步的,所以没法记录,只能记录mutation

      第一个参数是ctx,表示当前的store

    actions触发: 用dispatch,$store.dispathc('action名称',payload),返回值是promise.

    getters:

      用在computed里的,用组件中的watch监控getters里的的方法:$watch(fn: String,fn)

     created() {
        this.$watch(
          () => this.$store.getters['userLogin/getStatus'],//第一个参数是函数,监控对象是该函数的返回值
          (val) => {
            console.log(this.$route.params.topath);
            if (val !== 'isLogining') {
              const path = this.$route.query.topath || '/';
              this.$router.push(path).catch(() => {});
            }
          }
         
        );

    store是可以不依赖组件就独立存在的

      比如自动登录功能,在main.js中,可以在new Vue()生成vue对象之前,就进行登录验证,

           

  • 相关阅读:
    9-1058. 选择题(20)
    8-素数打表
    7- 插入与归并
    6-爱丁顿数(题意理解)
    5-单身狗(时间和空间的相互选择)
    4-1068. 万绿丛中一点红
    3-1067. 试密码
    2-素数打比表
    21-矩形的嵌套
    maven设置打jar包并引入依赖包
  • 原文地址:https://www.cnblogs.com/dangdanghepingping/p/14869906.html
Copyright © 2011-2022 走看看