雅荷心语博客之前一段时间一直没有留意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', false, /\.js$/) const modules = {} files.keys().forEach(key => { modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default }) export default modules |
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 |
<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 ...mapActions("index",["upload"]) }, created() { console.log(this.press) //这里直接就可以 this,upload() 调用方法了 this.upload() }, } </script> |
大致就是这样!
看看