zoukankan      html  css  js  c++  java
  • vuex的模块化使用

    store文件如下

     1.modules下文件是模块化的划分,里面的js有state,action,mutations.然后通过

    export default {
    namespaced: true,
    state,
    mutations,
    actions
    }

    方式导出。

    2.index.js中导出的格式如下

    new Vuex.Store({
      modules:{
          app:{
              namespaced:true,
              state:{},
              mutations:{},
              actions:{}
          },
          ...
      },
      getters:{
        sidebar: state => state.app.sidebar,
        size: state => state.app.size,
        device: state => state.app.device,
        sjhnum: state => state.shangjinhui.num,
        ...
      }
    })

    所以index.js中需要先对modules进行处理,通过require.context获取modules下所有js文件,如下

    const modulesFiles = require.context('./modules', true, /.js$/)
    const modules = modulesFiles.keys().reduce((modules, modulePath) => {
      const moduleName = modulePath.replace(/^./(.*).w+$/, '$1')     
      const value = modulesFiles(modulePath)
      modules[moduleName] = value.default                               
      return modules
    }, {})

    然后对getters的处理可以摘出来放到单独js里。

    因为modules的处理,下面相对于普通的使用方式多了个命名空间

    3.获取store里的数据

    1 this.$store.state.命名空间.

    import { mapState } from 'vuex';

    computed:{

    ...mapGetters({

      'getters里定义的key(其实对应的state值)'

    })

    }

    4修改store值

    this.$store.dispatch('命名空间/actions里的函数名',参数数据),
    this.$store.commit('命名空间/mutations里的函数名',参数数据)

  • 相关阅读:
    js 右击
    javascript 中的函数,控制流, 事件委托
    javascript 的 this , js 线程
    javascript 中的var : 隐含变量 全局变量 变量提升
    明日
    ajax循环json 中的 for(var prop in data) 与 hasProperty()
    js继承机制
    callee, caller,toString(),String()
    解决eclipse中jsp下无代码提示问题
    商业模式
  • 原文地址:https://www.cnblogs.com/live-to-talk/p/12786970.html
Copyright © 2011-2022 走看看