第七章 VueX状态管理

VueX状态管理什么是Vuexvuex基础stateVuex状态管理模式mutationsgettersactionsmodulesdevtoolsplugins

vuex基础什么是Vuex

Vuex是一个专为

Vue.js

应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.Vuex

作用状态管理-非父子通信缓存后端数据避免重复请求，影响用户体验时光旅行-调试什么是vuex安装npminstallvuex--savesrc中创建store/index.js文件在store.js中导入vuex状态管理库

importVuefrom'vue’

importVuexfrom'vuex'Vue.use(Vuex)实例化并导出vuexExportdefaultnewVuex.Store({…})vuex基础Vuex状态管理模式使用步骤Vuex使用原理图Vuex使用Vuex

的对象stateMutationsActionsGettersmodulespluginsdevtoolsVuex中的stateVuex的使用state:单一状态树

,每个应用将仅仅包含一个

store

实例,vuex的基本数据，用来存储变量。store/index.js定义state子组件template使用stateVuex中muationsVuex的使用提交更新state数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。store/index.js定义mutations子组件template使用mutationsVuex中actionsVuex的使用

actions提交的是mutations，而不是直接变更状态,actions可以包含任意异步操作。store/index.js定义actions子组件template使用actionsVuex中gettersVuex的使用store/index.js定义getters从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法子组件template使用gettersVuex中modulesVuex的使用模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。store/index.js定义modules子组件template定义子模块cart子组件template使用modules中的vuex对象Vuex中PluginsVuex的使用vuex

可以提供一些组件的使用，这个参数可以订阅一个函数，让这个函数在所有的mutations结束之后执行。Devtools工具Vuex的使用工具包的安装vue-devtools

工具包：/vuejs/vue-devtoolsDevtools的调试使用mapState,mapGetters,mapActions的使用Vuex的使用mapState,mapGette