Vuex的使用

从别处搬的代码用久了,一直不知道Vuex具体是为了干什么的,该怎么去用它。

  • Vuex是什么
    vuex的核心是一个store(仓库),包含着应用中需要用到的state(状态)。

  • 什么情况下使用Vuex

    为了在多个视图引用同一个 “变量 ” ,并且无论在哪个视图中对这个 “变量 ” 进行修改,其他视图中都能同步这个修改, 我们可以将这个 “变量 ” 放入store的state中

  • 如何使用Vuex【同步状态state】

    假如,我们需要在多个视图中使用同一个变量 count,先在store(仓库)中添加一个state(状态)名为 count :

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      }
    })
    

    如今我们想修改count的值,虽然可以直接使用 store.state.count = 5 ;但是这样无法实现同步,vuex中提供了mutations方法,需要使用 state.commit('increment ') 来触发 mutations 来改变 count的值。还可以用commit方法传参来更灵活的修改count的值:

    mutaion: {
        increment (state, n) {
            state.count += n;
        }
    }
    
    store.commit('increment', 10);
    

    单单传一个参数可能很难满足我们开发的需求,这时可以传入一个payload(提交载荷):

    mutation: {
        increment (state, payload) {
            state.totalPrice += payload.price + payload.count;
        }
    }
    
    store.commit({
        type: 'increment',
        price: 10,
        count: 8
    })
    

    为了触发所有的视图同步更新count的功能,我们将count的值放入计算属性 computed中:

    computed: {
            count () {
                return this.$store.state.count
            }
        }
    

    使用这种方法看起来很冗余,vuex提供了mapState辅助函数,我们可以通过这样使用,以简化编码:

    computed: mapState([ 'count' ])
    

    这样便可以将 this.count 映射为 store.state.count;

  • Getters对象

    虽然我们同步更新了这个状态,但往往会需要再对这个参数进行处理之后才能使用,当然,我们可以在每一处引用的地方添加一个处理函数,但是,当这个处理过程需要更改时,我们需要在所有引用的地方复制一遍 新的处理函数,很没有效率,不便于维护。

    Vuex中getters对象,可以方便我们在store中做集中的处理。Getters接受state作为第一个参数:

    const store = new Vuex.Store({
      state: {
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
      },
      getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      }
    })
    

    组件中调用形式:

    computed: {
      doneTodos () {
        return this.$store.getters.doneTodos
      }
    }
    

    同理,这样调用比较繁琐,vuex提供了一个和mapState 作用相同的辅助函数 mapGetters,在计算属性中这样引入:

    computed: mapGetters([
          'doneTodosCount',
          'anotherGetter',
          // ...
        ])
    
  • 同步函数mutations
    mutations是改变state的唯一方法,我们在项目中需要改变state的值时,使用 state.commit('increment') ,不如直接使用methods那么方便,vuex提供了mapMutations映射函数,使我们在调用methods时可以映射为 state.commit调用:

    // 注 Mutations必须是同步函数。
    methods: {
        ...mapMutations([
          'increment' // 映射 this.increment() 为 this.$store.commit('increment')
        ]),
        ...mapMutations({
          add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
        })
      }
    
  • 异步函数Aciton
    妈耶,看不懂,我再去学学..........

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,927评论 0 7
  • vuex的使用 一、配置 1、在store/index中配置 2、导入maiin.js,传入根组件中 二、stat...
    风的记忆乀阅读 1,413评论 0 0
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,453评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,111评论 0 6
  • 第一步:下载cnpm install vuex --save 第二步:在src目录下创建store目录,在stor...
    大笑一声阅读 301评论 0 0