Vuex之第五弹终弹之模块化实践项目运用
vuex模块化结构目录
1>store>index.js
import Vue from 'vue'; import Vuex from 'vuex'; import state from './state'; import mutations from './mutation'; import api from './api'; import system from './system'; Vue.use(Vuex); export default new Vuex.Store({ state, mutations, modules: { api: api, system: system } });
2>store>system>actions.js
import * as types from './mutation-types'; export const topUserListAction = ({ state, dispatch, commit, getters }, params) => { let payload = { val: 99 }; console.log('我进来了params', params.data); commit(types.SYSTEM_LOG_ID_QUERY, params.data); console.log('我进来了5state', state); console.log('我进来了5state', getters.perpage); dispatch('api/getTopUserList', payload, { root: true }); };
2>store>system>getters.js
export const perpage = state => { return state.te2Sys + 'c4'; };
3>store>system>mutations.js
import * as types from './mutation-types'; export default { [types.SYSTEM_LOG_ID_QUERY](state, res) { state.te2Sys = state + res; } };
4>store>system>mutation-types.js
export const SYSTEM_LOG_ID_QUERY = 'SYSTEM_LOG_ID_QUERY';
5>store>system>index.js
import * as actions from './actions'; import mutations from './mutations'; import * as getters from './getters'; const state = { te2Sys: 'c3' }; export default { namespaced: true, state, getters, actions, mutations };
6>store的api其他大致与system一样,主要是actions的
store>api>actions.js
export const getTopUserList = ({ state, dispatch }, payload, root) => { console.log('我进来了2', payload); dispatch('api/ajaxMethod', { param: ['get', state.server + '/dispatch/order/findTop10Users', payload.param, payload] }, { root: true }); }; export const ajaxMethod = ({ state, dispatch }, data) => { console.log('我进来了7', data); };
7>vue页面开始调用,也就是所谓的执行入口
<script> import { mapGetters, mapActions } from 'vuex'; export default { components: {}, props: {}, data() { return {}; }, watch: {}, computed: {}, methods: { ...mapActions('system', ['topUserListAction']) }, created() {}, mounted() { console.log(this.$store); this.topUserListAction({ data: '我是人' }); } }; </script>
解析:
1>在vue中打印的
console.log(this.$store); 中,vuex的actions的值目前为现在这样,因为是模块化所以带上了类似api/后面跟的其中action暴露的方法名字,
而且调用的时候需要
...mapActions('system', ['topUserListAction'])
前面那一个必须是模块名,后面为模块名对应的方法名,如果2个action模块不一样,那就再调一次,如
...mapActions('api', ['***'])
2>第一步执行之后,就先走到了store>system>actions.js的topUserListAction里面
可以看到第一组对象是vuex全家桶的内部调用形式,第二个是外部传来的参数
在方法里面直接演示了
state, dispatch, commit, getters这四种调用的形式,其中需要注意一点的是dispatch里面的{ root: true },不加就会报错
错误原因是你可以理解为deep这种深度监听,它会寻找到这个模块下的根目录,然后就会调用
api/getTopUserList也就是api模块下的getTopUserList的actions的方法
想要具体了解,就看官网https://vuex.vuejs.org/zh/guide/modules.html
3>从system模块下进入到了api模块下的actions的getTopUserList
4>然后进入到了相同模块下的ajaxMethod