zoukankan      html  css  js  c++  java
  • vuex的模块化组织

    在实际项目中,我们只掌握到vuex的基本操作,显然是不行的,在项目中如果组件太多,不可能把所有组件的数据都放到一个 store.js 中的,所以就需要模块化的组织 Vuex,首先看一下 项目结构

     
    项目结构
    一、首先执行以下命令:

    vue init webpack-simple vuex-demo
    cd vuex-demo
    npm install
    npm install vuex -S
    npm run dev

    二、按照上图结构创建文件目录
     
    Vuex 模块化目录
    三、编写文件

    我们就延用上两篇文章中的例子。先说一个各个文件的作用

    types.js 内定义常量,使用常量替代 mutation 事件类型
    user.js 内写该 user 组件内用到的 stategettersactionsmutations,并最后统一导出(类似上个例子中的 store.js )
    getters.js 内写原来的 getters ,用来获取属性
    actions.js 内写原来的 actions ,就是要执行的动作,如流程的判断、异步请求
    index.js 是用来组装 actions.js 、 getters.js 、user.js 的,然后进行统一的导出

    1. 在 main.js 中导入 index.js 文件并注册
    import Vue from 'vue'
    import App from './App.vue'
    import store from './store/index.js'
    
    new Vue({
      store,
      el: '#app',
      render: h => h(App)
    })
    
    2. 在 types.js 内定义 常量 并导出,默认全部大写
    // 定义类型常量,默认全部大写
    const INCREMENT = 'INCREMENT'
    const DECREMENT = 'DECREMENT'
    
    export default {
        INCREMENT,
        DECREMENT
    }
    

    注意:把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然。用不用常量取决于你——在需要多人协作的大型项目中,这会很有帮助。但如果你不喜欢,你完全可以不这样做。

    3. user.js 内写该 user 组件内用到的 stategettersactionsmutations
    // 导入 types.js 文件
    import types from "./../types";
    
    const state ={
        count:5
    }
    
    // 定义 getters
    var getters ={
        count(state){
            return state.count
        }
    }
    
    const actions ={
        increment({ commit, state }){
            // 此处提交的事件与下方 mutations 中的 types.INCREMENT 对应,与原来 commit('increment') 的原理相同,只是把类型名换成了常量
            commit(types.INCREMENT)
        },
        decrement({commit,state}){
            if (state.count>10) {
                // 此处提交的事件与下方 mutations 中的 types.DECREMENT 对应
                commit(types.DECREMENT)
            }
        }
    }
    
    const mutations ={
        // 此处的事件为上方 actions 中的 commit(types.INCREMENT)
        [types.INCREMENT](state){
            state.count++
        },
        // 此处的事件为上方 actions 中的 commit(types.DECREMENT)
        [types.DECREMENT](state){
            state.count--
        }
    }
    // 最后统一导出
    export default {
        state,
        getters,
        actions,
        mutations
    }
    

    注意:上方 mutations 中的 [types.INCREMENT] 写法,因为 types.INCREMENT 是一个对象,所以不能直接当做一个函数名来写,需要用到 ES2015 风格的计算属性命名功能来使用一个常量作为函数名,方能正常使用,原来的写法为:

    const mutations ={
        increment(state){
            state.count ++;
        }
    }
    
    4. getters.js 内写原来的判断奇偶数方法
    // 因为数据从 user.js 中获取,所以需要引入该文件
    import user from './modules/user'
    
    const getters = {
        isEvenOrOdd(state){
            // 注意数据是从 user.js 中获取的,所以写成 user.state.count
            return user.state.count % 2 == 0 ? "偶数" : "奇数"
        }
    }
    // 并导出
    export default getters;
    
    5. actions.js 内写原来的异步操作
    // 异步操作中需要用到 increment 方法,所以需要导入 types.js 文件
    import types from './types'
    
    const actions= {
        incrementAsync({ commit, state }) {
            // 异步操作
            var p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
                }, 3000);
            });
            p.then(() => {
                commit(types.INCREMENT);
            }).catch(() => {
                console.log('异步操作');
            })
        }
    }
    // 最后导出
    export default actions;
    
    6. 在 index.js 中组装 actions.js 、 getters.js 、user.js 的,然后统一导出
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    import getters from './getters'
    import actions from './actions'
    import users from './modules/user'
    // 导出 store 对象
    export default new Vuex.Store({
        getters,
        actions,
        modules:{
            users
        }
    })
    

    注意:在导出 store 对象时,因为 gettersactionsvuex 的核心概念中有默认,可以直接写入。但是 users 不是默认的,所以用到 vuex 中的 modules 对象进行导出

     
    核心概念
    7. Vue.app 文件不作任何修改
    <template>
      <div id="app">
        <button @click="increment">增加</button>
        <button @click="decrement">减少</button>
        <button @click="incrementAsync">延时增加</button>
        <p>{{count}}</p>
        <p>{{isEvenOrOdd}}</p>
      </div>
    </template>
    
    <script>
    import { mapGetters, mapActions } from "vuex";
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      computed:mapGetters([
        'count',
        'isEvenOrOdd'
      ]),
      methods:mapActions([
        'increment',
        'decrement',
        'incrementAsync'
      ])
    }
    </script>
    

    最后,惊心动魄的时候到了,我这费半天劲的东西到底能不能跑起来


     
    vuex模块化.gif

    对于新手们来说,光是看一次可能很难理解这个过程,还是要亲自多试一试的,有什么问题,欢迎大家一起探讨。

  • 相关阅读:
    事务1-JDBC事务管理
    Tomcat地址栏传中文参数乱码问题处理
    hibernate报错:org.hibernate.MappingException: No Dialect mapping for JDBC type: -1
    UVA12170 Easy Climb
    [POI2004]旅行问题
    [SCOI2010]股票交易
    [USACO11OPEN] Mowing the Lawn G
    查看文件个数 ls |wc -l
    【zombie】如何查看并杀死僵尸进程?
    [Windows] 屏幕截图
  • 原文地址:https://www.cnblogs.com/wu971023-/p/8708218.html
Copyright © 2011-2022 走看看