小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
vuex使用笔记
  • 首页 > 前端 > Vue
  • 作者:小昱
  • 2017年6月26日 12:49 星期一
  • 浏览:187
  • 字号:
  • 评论:0
  • 一、应用构建

    入口文件app.js

    import Vue from 'vue'
    import test from './test.vue'
    import store from './store' //启用vuex的store
    
    new Vue({
      el: '#app',
      store,
      render: h => h(test)
    })

    index.html

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>test</title>
    </head>
    <body>
      <div id="app"></div>
      <script src="/__build__/shared.js"></script>
      <script src="/__build__/test.js"></script>
    </body>
    </html>

    二、vuex核心模块

    1.state与mustation

    store.js

    import Vue from "vue"
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const state = {
      num: 0
    }
    
    const mutations = {
      add: function (state) {
        state.num ++;
      },
      sub: function (state) {
        state.num --;
      }
    }
    
    // 或者使用es6的语法
    // 箭头函数
    // const mutations = {
    //   add: state => state.num ++,
    //   sub: state => state.num --
    // }
    // 函数简写
    // const mutations = {
    //   add(){
    //     state.num ++
    //   },
    //   sub(){
    //     state.num --
    //   }
    // }
    
    export default new Vuex.Store({
      state,
      mutations
    })

    以上代码,new了一个vuex的存储实例,Vuex.Store中:

     state         定义状态 
     mutations     定义状态更改
    在vue中使用

    在vue组件中获取state,使用this.$store.state.xxx

    在vue组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store

    test.vue

    <template>
      <div id="app">
        <div>{{ $store.state.num }}</div>
        <button @click="increment">add</button>
        <button @click="decrement">sub</button>
      </div>
    </template>
    
    <script>
      import { mapMutations } from 'vuex'
    
      export default {
        methods: {
          // mapMutations 数组形式
    //      ...mapMutations([
    //        'add', // 映射 this.add() 为 this.$store.commit('add'),调用的时候使用add
    //        'sub'
    //      ])
          // mapMutations 对象形式
    //      ...mapMutations({
    //        increment: 'add', // 映射 this.add() 为 this.$store.commit('add'),调用的时候使用increment
    //        decrement: 'sub'
    //      })
          // 或者直接定义方法,使用$store.commit()
          increment(){
            this.$store.commit('add')
          },
          decrement(){
            this.$store.commit('sub')
          }
        }
      }
    </script>
    
    <style>
    
    </style>
    使用常量

    当 mutation 事件类型比较多的时候,我们可以使用常量替代 mutation 事件类型。同时把这些常量放在单独的文件中可以让我们的代码合作者对整个 app 包含的 mutation 一目了然

    mutation-types.js

    export const ADD = 'ADD'
    export const SUB = 'SUB'

    store.js

    import Vue from "vue"
    import Vuex from 'vuex'
    import {ADD, SUB} from './mutation-types'
    
    Vue.use(Vuex)
    
    const state = {
      num: 0
    }
    
    const mutations = {
      [ADD] (state) { state.num ++ },
      [SUB] (state) { state.num -- }
    }
    
    export default new Vuex.Store({
      state,
      mutations
    })

    test.vue

    <template>
      <div id="app">
        <div>{{ $store.state.num }}</div>
        <button @click="ADD">add</button>
        <button @click="SUB">sub</button>
      </div>
    </template>
    
    <script>
      import { mapMutations } from 'vuex'
    
      export default {
        methods: {
          // mapMutations 数组形式
          ...mapMutations([
            'ADD', // 映射 this.ADD() 为 this.$store.commit('ADD'),调用的时候使用ADD
            'SUB'
          ])
          // mapMutations 对象形式
    //      ...mapMutations({
    //        increment: 'ADD', // 映射 this.add() 为 this.$store.commit('ADD'),调用的时候使用increment
    //        decrement: 'SUB'
    //      })
          // 或者直接定义方法,使用$store.commit()
    //      increment(){
    //        this.$store.commit('ADD')
    //      },
    //      decrement(){
    //        this.$store.commit('SUB')
    //      }
        }
      }
    </script>
    
    <style>
    
    </style>

    2.getters

    有时候我们需要从 store 中的 state 中派生出一些状态,Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。Getters 接受 state 作为其第一个参数。

    getters 会暴露为 store.getters 对象,也就是说可以通过 store.getters[属性]来进行相应的调用。mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性,其实也就是从 getters 中获取对应的属性,跟解构类似。

    store.js

    import Vue from "vue"
    import Vuex from 'vuex'
    import {ADD, SUB} from './mutation-types'
    
    Vue.use(Vuex)
    
    const state = {
      num: 0
    }
    
    const getters = {
      evenOrOdd: state => state.num % 2 == 0 ? 'even' : 'odd'
    }
    
    const mutations = {
      [ADD] (state) { state.num ++ },
      [SUB] (state) { state.num -- }
    }
    
    export default new Vuex.Store({
      state,
      mutations,
      getters
    })

    test.vue

    <template>
      <div id="app">
        <div>{{ $store.state.num }}</div>
        <button @click="ADD">add</button>
        <button @click="SUB">sub</button>
        <p>{{ evenOrOdd }}</p>
        <span>{{ this.$store.getters.evenOrOdd }}</span>
      </div>
    </template>
    
    <script>
      import { mapMutations, mapGetters  } from 'vuex'
    
      export default {
        methods: {
          ...mapMutations([
            'ADD',
            'SUB'
          ])
        },
        computed: {
    //      evenOrOdd () {
    //        return this.$store.getters.evenOrOdd
    //      }
    
    //      ...mapGetters([
    //        'evenOrOdd'
    //      ])
    
          ...mapGetters({
            evenOrOdd: 'evenOrOdd'
          })
        }
      }
    </script>
    
    <style>
    
    </style>

    3.actions

    mutation 像事件注册,需要相应的触发条件。而 Action 就那个管理触发条件的。

    Action 类似于 mutation,不同在于:

    • Action 提交的是 mutation,而不是直接变更状态。

    • Action 可以包含任意异步操作。

    store.js

    import Vue from "vue"
    import Vuex from 'vuex'
    import {ADD, SUB} from './mutation-types'
    
    Vue.use(Vuex)
    
    const state = {
      num: 0
    }
    
    const mutations = {
      [ADD] (state) { state.num ++ },
      [SUB] (state) { state.num -- }
    }
    
    const actions = {
      // increment (context) {
      //   context.commit('increment')
      // }
      //  参数解构的形式
      increment ({ commit }) {
        commit('ADD')
      },
      decrement ({ commit }) {
        commit('SUB')
      }
    }
    
    export default new Vuex.Store({
      state,
      mutations,
      actions
    })

    在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store

    test.vue

    <template>
      <div id="app">
        <div>{{ $store.state.num }}</div>
        <button @click="increment">add</button>
        <button @click="decrement">sub</button>
      </div>
    </template>
    
    <script>
      import { mapActions  } from 'vuex'
    
      export default {
        methods: {
    //      increment(){
    //        this.$store.dispatch('increment')
    //      },
    //      decrement(){
    //        this.$store.dispatch('decrement')
    //      },
          ...mapActions([
            'increment',
            'decrement'
          ])
        }
      }
    </script>
    
    <style>
    
    </style>


      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: vuex使用笔记
    本文地址:http://www.xiaoyulive.top/?post=99
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号