vuex

140 阅读1分钟

单向数据流

用户发起动作(actions) > 改变state数据源 > 更新视图

uve

在vue里面如何修改数据

父组件通过props这个属性传递数据或方法给子组件,如果子组件修改数据需要用event/emit属性修改.
当我们遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏

vuex是什么?

vuex是一个专门为vue.js应用程序开发的状态管理模式, 每一个vuex的核心就是store(仓库)store就是一个容器,包含着应用中大部分的状态(state)
state原始的数据
可以通过this.store.state.name 访问到我们想要的数据哦

一般我们要用什么数据最好提前声明好,不然后面通过Vue.set(obj,'newProp',123)添加就会很麻烦

![state](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/26/16fe0f0aceceb0ab~tplv-t2oaga2asx-image.image)

mapState辅助函数

如果我们每次获得一个数据都要声明,那么当数据量过大,这就很低效,所以Vuex为我们准备了语法糖

mapState

getter

用来获取数据和vue的computed计算属性以及Object.defineProperty中的getter差不多

getter

mutation

用来修改数据 就像Object.defineProperty中的setter

mutation
每次声明很烦,直接调用?嗯嗯,有语法糖...mapMutations
mutation必须是同步函数,异步的话可以放到actions里面

action

异步修改数据

actions:{
    increment({commit}){
        commit('increment')
    }
}
store.dispatch('increment')

module

从名字你就能感觉到了,没错就是模块化,如果数据过于繁杂,你可以对其进项拆分

module