vuex modules ajax,VUE项目爬坑---6、vuex的真正存在的意义是什么

「爱情、让人受尽委屈。」 2022-09-03 14:17 195阅读 0赞

VUE项目爬坑---6、vuex的真正存在的意义是什么

一、总结

一句话总结：

a、【避免低效的数据传递】：当多个组件嵌套的时候，只能父子传递，那么中间的组件只能做传递数据之用，数据不是它用，它却传递数据，这样不合理

b、【管理组件状态】：vuex可以让多个组件很方便的获取和管理状态

1、提交 Mutations，分发 Action？

提交 Mutations：store.commit('increment')

分发 Action：store.dispatch('increment')

2、vuex中action、mutations、state和外部调用的关系？

vuex中action操作mutations，mutations操作state，外部就dispatch action

3、我们可以import引入模块，那肯定是文件里面export了？

我们可以import引入模块，那肯定是文件里面export了，无论是常用的组件比如vue，还是我们简单的变量

import Vue from 'vue'

import Vuex from 'vuex'

import state from './state'

import mutations from './mutations'

import actions from './actions'

import getters from './getters'

import \{ADD\_TODO, DELETE\_TODO, SELECT\_ALL\_TODOS, DELETE\_COMPLETE\_TODOS\} from './mutation-types'

4、js让字符串变成变量？

可以加中括号，例如\[DELETE\_TODO\] (state, \{index\}) \{state.todos.splice(index, 1)\}

/\*

包含n个用于直接更新状态的方法的对象模块

\*/

import \{ADD\_TODO, DELETE\_TODO, SELECT\_ALL\_TODOS, DELETE\_COMPLETE\_TODOS\} from './mutation-types'

export default \{

\[ADD\_TODO\] (state, \{todo\}) \{ // 方法名不是ADD\_TODO, 而是add\_todo

state.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为true

watch:\{//监视todos的所有变化

todos:\{

deep:true，//深度监视

handler:storageUti1.saveTodos//保存todos 到Localstoragd

\}

\}

7、vuex中的module(模块化)？

各个状态管理可以分模块，对大应用很方便，一个模块里面就是一套的state、mutations、actions、getters

二、内容在总结中

博客对应课程的视频位置：

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是vuex

什么是vuex 简介这里是vuex的官网[vuex][],在官网中有对其比较详细的解释，这里也给出我对于vuex的理解，后面会在文章中详细的讲解，state,Ge

落日映苍穹つ/ 2024年03月16日 13:32/ 0 赞/ 99 阅读

相关 vuex modules ajax,VUE项目爬坑---6、vuex的真正存在的意义是什么

VUE项目爬坑---6、vuex的真正存在的意义是什么一、总结一句话总结： a、【避免低效的数据传递】：当多个组件嵌套的时候，只能父子传递，那么中间的组件只能做传递数

「爱情、让人受尽委屈。」/ 2022年09月03日 14:17/ 0 赞/ 196 阅读

相关到底vuex是什么

关于vuex类的新闻最近很多，看到眼热就去查了下资料，然后扯出来一堆flux、redux、state、state之类的概念，以及大型工程必要性之类的。看官方手册也是昏昏然。

不念不忘少年蓝@/ 2022年06月07日 11:27/ 0 赞/ 460 阅读

相关 vuex中的modules

vuex中将数据模块化 1. 在vuex中将组件模块化，注意：加属性：namespaced：true；命名空间 const downloade = {

Love The Way You Lie/ 2022年02月26日 09:10/ 0 赞/ 268 阅读

相关 mpvue中使用vuex爬坑过程

1、辅助函数不能使用 vuex的辅助函数有mapState、mapGetters、mapMutations、mapActions。我们在子组件经常用到很多状态量，为了

怼烎@/ 2022年02月09日 11:55/ 0 赞/ 305 阅读

相关什么是Vuex

什么是Vuex: vuex是一个专门服务vue,js的应用程序开发的状态管理模式; (这个状态我们可以理解成为在data中的属性,需要共享给其它组件使用

不念不忘少年蓝@/ 2021年12月19日 02:45/ 0 赞/ 422 阅读

相关 Vuex是什么?

记得去年公司招聘前端工程师的时候，我要负责准备面试题去考验面试者，让我记忆深刻的有一件事，我看大多数面试者简历上都写了熟练掌握Vuex，然而当我问起的时候，大部分回

谁借莪１个温暖的怀抱￠/ 2021年09月19日 20:12/ 0 赞/ 479 阅读

相关 vuex笔记（一）——什么是vuex？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。项目中，它相当于一个中央管理仓库，来存储一些页面共用的数据或状态，主

痛定思痛。/ 2021年08月13日 22:11/ 0 赞/ 713 阅读

相关 vuex modules

export default new Vuex.Store({ //存储数据 state:{ },

叁歲伎倆/ 2021年07月24日 15:28/ 0 赞/ 374 阅读

相关 vuex基础-Vuex是什么呢？

vuex Vuex是什么呢？它是Vue的状态管理模式，在使用vue的时候，需要在vue中各个组件之间传递值是很痛苦的，在vue中我们可以使用vuex来保存我们需要管理的状

我就是我/ 2021年07月24日 12:24/ 0 赞/ 596 阅读