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

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

二、内容在总结中

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