雅荷心语博客之前一段时间一直没有留意Vuex也更新了.最近用到了, 突然发现,.,…
过了个年, Vuex几乎不会用了~
静下心来好好看文档, 收获不大, 然后公司同事写了个demo 给我, 算是研究出一点眉目,理解有误还请指出,非常感谢
首先模块化, 我的理解就是, 以前的时候, vuex的数据基本都是堆放在一起的, 现在, 可以配置一个路由所对应的页面一个 vuex数据源!
然后把所有的数据源文件引入到统一的store 文件里, 最后抛出给vue,
首先, 我们就一个路由一个vuex文件!
在src文件夹里面新建一个store文件夹, 然后里面新建一个module文件夹,用来存放路由对应的文件
store 里面新建一个index.js 用来 new Vuex, loader.js 用来把module 里面所有的文件载入进来
loader.js
|
1 2 3 4 5 6 7 8 |
const files = require.context('./modules', true, /\.js$/) const modules = {} // store 二级目录资源 files.keys().forEach(key => { modules[key.replace(/(\.\/|\.js)/g, '') .replace(/(\/)/g, '_')] = files(key).default }); export default modules |
特别说明: loader.js 载入modules 后, 和 一个一个import进来的有区别, 因为 加载进来的目录里面的js文件, 我们需要给 吐出去的 modules 一个名字(vuex命名空间),
因此我使用的方法是, 例如 ./index/index.js, 则会变成 index_index, 如果是 ./index/abc/def.js, 则是 index_abc_def 以此类推! 具体请仔细分析如上正则
index.js
|
1 2 3 4 5 6 7 8 9 10 11 |
import Vue from 'vue' import Vuex from 'vuex' import modules from './loader' Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'production' export default new Vuex.Store({ modules, strict: debug }) |
然后我们看看module里面的文件,
我现在新建一个 index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
export default { //启用命名空间 namespaced: true, state: { press: 0, tm: '' }, mutations: { 'press': (state, show) => { state.press = show; }, 'tm': (state, show) => { console.log(show) state.tm = show; } }, actions: { start({commit, dispatch}, data) { dispatch('upload', data); }, upload({commit, dispatch}, data) { commit('tm',666) }, }, } |
在我需要使用的页面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script> //载入vuex 提供的内置方法 import {mapActions,mapState,mapMutations} from 'vuex'; export default { name: 'HelloWorld', data() { return {} }, computed : { //<span class="com">映射 this.press 到 this.$store.state.index.press</span> ...mapState({ press : (state)=>state.index.press, tm : (state)=>state.index.tm, }) }, methods:{ // 这里寻找 index 模块里面的 upload, 然后注入到了 methods, // 如果需要调用 index 目录里面的abc.js, 则前面的name则为 index_abc ...mapActions("index",["upload"]) }, created() { console.log(this.press) //这里直接就可以 this,upload() 调用方法了 this.upload() }, } </script> |
大致就是这样!
