网站忧化 推广同时做,科学小制作 小发明 简单 手工,网易云邮箱,电子商务和网络购物网站VUE项目爬坑---6、vuex的真正存在的意义是什么一、总结一句话总结#xff1a;a、【避免低效的数据传递】#xff1a;当多个组件嵌套的时候#xff0c;只能父子传递#xff0c;那么中间的组件只能做传递数据之用#xff0c;数据不是它用#xff0c;它却传递数据#xff0…VUE项目爬坑---6、vuex的真正存在的意义是什么一、总结一句话总结a、【避免低效的数据传递】当多个组件嵌套的时候只能父子传递那么中间的组件只能做传递数据之用数据不是它用它却传递数据这样不合理b、【管理组件状态】vuex可以让多个组件很方便的获取和管理状态1、提交 Mutations分发 Action提交 Mutationsstore.commit(increment)分发 Actionstore.dispatch(increment)2、vuex中action、mutations、state和外部调用的关系vuex中action操作mutationsmutations操作state外部就dispatch action3、我们可以import引入模块那肯定是文件里面export了我们可以import引入模块那肯定是文件里面export了无论是常用的组件比如vue还是我们简单的变量import Vue from vueimport Vuex from vueximport state from ./stateimport mutations from ./mutationsimport actions from ./actionsimport getters from ./gettersimport {ADD_TODO, DELETE_TODO, SELECT_ALL_TODOS, DELETE_COMPLETE_TODOS} from ./mutation-types4、js让字符串变成变量可以加中括号例如[DELETE_TODO] (state, {index}) {state.todos.splice(index, 1)}/*包含n个用于直接更新状态的方法的对象模块*/import {ADD_TODO, DELETE_TODO, SELECT_ALL_TODOS, DELETE_COMPLETE_TODOS} from ./mutation-typesexport default {[ADD_TODO] (state, {todo}) { // 方法名不是ADD_TODO, 而是add_todostate.todos.unshift(todo)},[DELETE_TODO] (state, {index}) {state.todos.splice(index, 1)},[SELECT_ALL_TODOS] (state, {isCheck}) {state.todos.forEach(todo todo.complete isCheck)},[DELETE_COMPLETE_TODOS] (state) {state.todos state.todos.filter(todo !todo.complete)}}5、从后台ajax来的数据都可以用watch来监控用watch监控之后后台ajax来的数据之后这样数据一旦获取就可以通过watch来更新6、vue的watch中还有深度监视设置监视属性的deep为truewatch:{//监视todos的所有变化todos:{deep:true//深度监视handler:storageUti1.saveTodos//保存todos 到Localstoragd}}7、vuex中的module(模块化)各个状态管理可以分模块对大应用很方便一个模块里面就是一套的state、mutations、actions、getters二、内容在总结中博客对应课程的视频位置
