Vuex中模块化组织的示例分析-创新互联
这篇文章主要为大家展示了“Vuex中模块化组织的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vuex中模块化组织的示例分析”这篇文章吧。
成都创新互联公司网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队,负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作,以确保网站外观精美、成都网站制作、成都网站设计、外贸营销网站建设易于使用并且具有良好的响应性。在实际项目中如果组件太多,就需要模块化的组织 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 组件内用到的 state 、 getters 、 actions 和 mutations,并最后统一导出(类似上个例子中的 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 组件内用到的 state 、 getters 、 actions 和 mutations
// 导入 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 对象时,因为 getters 和 actions 在 vuex 的核心概念中有默认,可以直接写入。但是 users 不是默认的,所以用到 vuex 中的 modules 对象进行导出
核心概念
7. Vue.app 文件不作任何修改
{{count}}
{{isEvenOrOdd}}
最后,惊心动魄的时候到了,我这费半天劲的东西到底能不能跑起来
以上是“Vuex中模块化组织的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文标题:Vuex中模块化组织的示例分析-创新互联
分享路径:http://myzitong.com/article/ioidh.html