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

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

    入口文件app.js

    import Vue from 'vue'
    import test from './test.vue'
    import store from './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>

    二、模块的创建

    namespaced: true使用命名空间,如果为false则为全局内容。

    modules/module1.js

    export default {
      namespaced: true, // 使用命名空间
      state: {
        num: 0
      },
      mutations: {
        add(state){
          state.num ++
        },
        sub(state){
          state.num --
        }
      },
      actions: {
        increment (context) {
          context.commit('add')
        },
        decrement (context) {
          context.commit('sub')
        }
      }
    }

    modules/module2.js

    export default {
      namespaced: true, // 使用命名空间
      state: {
        num: 0
      },
      mutations: {
        add(state){
          state.num ++
        },
        sub(state){
          state.num --
        }
      },
      actions: {
        increment (context) {
          context.commit('add')
        },
        decrement (context) {
          context.commit('sub')
        }
      }
    }

    三、引入模块

    store.js

    import Vue from "vue"
    import Vuex from 'vuex'
    import module1 from './modules/module1'
    import module2 from './modules/module2'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      modules: {
        module1,
        module2
      }
    })

    四、在Vue中使用

    <template>
      <div id="app">
        <div>
          <button @click="increment1">增加</button>
          <span>{{ a }}</span>
          <button @click="decrement1">减少</button>
        </div>
        <div>
          <button @click="increment2">增加</button>
          <span>{{ b }}</span>
          <button @click="decrement2">减少</button>
        </div>
      </div>
    </template>
    
    <script>
      import { mapState, mapActions } from 'vuex'
    
      export default {
        computed: {
          ...mapState ({
            a: state => state.module1.num,
            b: state => state.module2.num
          })
        },
        methods: {
    //      ...mapActions({
    //        increment1: 'module1/increment',
    //        decrement1: 'module1/decrement',
    //        increment2: 'module2/increment',
    //        decrement2: 'module2/decrement',
    //      }),
          ...mapActions('module1',{
            increment1: 'increment',
            decrement1: 'decrement',
          }),
          ...mapActions('module2',{
            increment2: 'increment',
            decrement2: 'decrement',
          })
        }
      }
    </script>
    
    <style>
    
    </style>

    注意此处使用mapState, mapGetters, mapActionsmapMutations 时的写法,需要加上命名空间。


      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: vuex之module的使用
    本文地址:http://www.xiaoyulive.top/?post=100
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    Chas382018-02-11 10:08
    We take it that alone a expert writer can ship visionary fulfilled that’s nothing stubby of best <a href=http://essayawesome.me/2017/10/26/three-writing-exercises-using-the-phrase-but-that/>http://essayawesome.me/2017/10/26/three-writing-exercises-using-the-phrase-but-that/</a> and brings the most skilfully results. Tok essay imagination vs knowledge. Every online attempt wordsmith in our network has a foul track-record of providing fact-finding and writing benefit to students. Revitalizing dell case study analysis
    Rickie742018-01-30 13:26
    We believe that alone a expert writer can cunning academic content that’s nothing short of correct http://ouanessayounsi.com/write-papers/martin-luther-full-junior-shows-numerous-training/ and brings the most skilfully results. Average time complete research paper. Every online effort wordsmith in our network has a strong track-record of providing check in and writing assistance to students. Short essay on uses and abuses of mobile phone
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

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