官方推荐的数据框架:在vue的开发中 vue实现视图层的开发,vuex来实现数据层,实现数据共享
vuex是整个虚线的内容:当项目中多个组件中的数据传值很困难时,把公用的数据放到一个公共的空间去存储,某一组件改变了这个公共部分的数据内容,其他组件就能感知到,vuex虚线中的内容就是公共数据存储的区域
紫色State:所有的数据都存储到State中,组件要用到公用数据直接调用State就可以了(当需要改变数据时不能直接用组件去改变State里的公用数据)
黄色Actions:放置的异步操作和一些复杂的批量的同步操作
红色Mutations:里面放一个一个同步的对State的修改
组件修改数据必须先调用Actions,Actions做一些异步操作或者是批量的同步操作,Actions再去调用Mutations,通过Mutations去改变State里的数据,有时也可以绕过Actions让组件直接调用Mutations去修改State的数据
当组件调用Actions时是组件调用Dispatch方法来操作Actions
组件直接调用Mutations或者Actions调用Mutations是通过Commit方法调用Mutations
数据发生变化后 组件的内容也就变化
用vuex时可以用vue面板:Vue Devtoos做代码的调试
并在全局引入(main.js文件):import引入
Vue对象中添加 store
使用格式:{{this.$store.state.city}}
改变 state 的值:
actions 里的第一个参数 ctx 是 changeCity 的上下文帮助 changeCity 方法拿到 commit,commit 里的 changeCity 是 mutations 里的 changeCity
mutations 中函数名不需要和组件调用 dispatch 里的方法名一样
mutations 里的方法也接受两个参数第一个是 state ,第二个是外部( actions 里的 changeCity 传入的第二个参数)传入的参数
数据简单的时候允许绕过 actions 直接调用 mutations 直接在组件中调用 commit 方法
vuex里的几个高级的api
mapState:
先引入:import { mapState } from 'vuex'
mapState 是指把 vuex 里的数据映射到组件里的计算属性 computed 中
图中就是把 city 这个(公用)数据映射到名字为 city 的计算属性中
之后就可以直接 this.city 这样用了
他也可以传入为一个 Object,意思是吧 vuex 中的公用属性 city 映射到组件的计算属性中,映射的名字是 currentCity
mapMutation:
先引入
在使用(用在 commit 方法的函数中):意思是 mutation 中有一个 changeCity,把这个 changeCity 映射到组件中的名字也为 changeCity 里,之后调用 mutation 的 commit 方法就可以简化了(注释部分是 commit 方法)
vuex 里的 getters:它的作用有点类似于组件中的 computed 计算属性的作用,当需要根据 state 里的数据算出一些新的数据的时候就可以用 mapGetters 来提供新的数据 避免数据的冗余。用法同 mapState、mapMutation
官网给出的代码
vuex 里的 Module:当遇到非常复杂的业务场景比如有很多公用的数据在vuex里存储比如把所有的 actions 或 mutations 的数据都放到一个 actions 或 mutations 里存储,这个 actions 或 mutations 文件会变得非常庞大不易维护,这时可以借助 Module 来对这个文件进行拆分,拆分以后 moduleA 只需要存储A模块所对应的 state 存储和 mutations 等操作,moduleB 只需要存储B模块所对应的 state 存储和 mutations 等操作,而在创建 store 时候在对所有模块进行一个整合,所以维护性更好
官网给出的代码
网友评论