image
一、前言
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。
当子组件 的数据和 父组件 按钮交互的时候 , 它们之间的通讯很麻烦。之所以这么麻烦 , 是因为父组件可以通过 props 给子组件传递参数 , 但子组件内却不能直接修改父组件传过来的参数。
如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递(非常麻烦)
兄弟组件之间也不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件(也非常麻烦)
例如:
试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为 App.vue , 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了, 他们需要共有的父组件通过自定义事件进行实现, A组件想要和B组件通讯往往是这样的:
image
- A组件说: "报告老大, 能否帮我托个信给小弟B" => dispatch一个事件给App
- App老大说: "包在我身上, 它需要监听A组件的dispatch的时间, 同时需要broadcast一个事件给B组件"
- B小弟说: "信息已收到", 它需要on监听App组件分发的事件
这只是一条通讯路径, 如果父组件下有多个子组件, 子组件之间通讯的路径就会变的很繁琐, 父组件需要监听大量的事件, 还需要负责分发给不同的子组件, 很显然这并不是我们想要的组件化的开发体验.
Vuex就是为了解决这一问题出现的
二、什么是Vuex
vuex 是 Vue 配套的 公共数据管理工具，我们可以将共享的数据保存到 vuex 中，
方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据。
必须在引入Vue之后再引入Vuex
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上
Vuex的基本使用
- 导入Vuex
<!--在导入Vuex之前必须先导入Vue-->
<script src="js/vuex.js"></script>
- 创建Vuex对象
const store = new Vuex.Store({
});
三、Vuex的核心概念
1. State
state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据。
如何通过State共享数据
- 创建Vuex对象
const store = new Vuex.Store({
// 这里的state就相当于组件中的data, 就是专门用于保存共享数据的
state: {
msg: "共享数据"
}
});
- 在祖先组件中添加
store的key保存Vuex对象
只要祖先组件中保存了Vuex对象 , 那么祖先组件和所有的后代组件就可以使用Vuex中保存的共享数据了
store: store,
- 在使用Vuex中保存的共享数据的时候, 必须通过如下的格式来使用
<p>{{this.$store.state.msg}}</p>
2. mutations
在Vuex中不推荐直接修改共享数据，因为如果多个组件都修改了共享的数据, 那么后期数据发生了错误, 我们如果需要去调试错误，就需要把每一个修改了共享数据的组件都检查一遍, 这样非常低效, 非常的不利于我们去维护。
如何修改State中的数据
mutattions是一个对象，这个对象里面可以放改变state的初始值的方法，具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变
通过
mutations是操作state的唯一办法
在执行mutations中定义的方法的时候, 系统会自动给这些方法传递一个state参数, state中就保存了共享的数据
const store = new Vuex.Store({
state: {
count: 1
},
// mutations: 用于保存修改共享数据的方法
mutations: {
increment (state) {// 这里面的参数除了state之外还可以再传额外的参数(变量或对象)
// 变更状态
state.count++
}
}
})
在组件中不能直接调用mutations中的方法, 需要通过store.commit方法调用
store.commit('increment') //调用mutations的方法名称
3. getters
Vuex的getters属性就和组件的计算属性一样, 会将数据缓存起来, 只有数据发生变化才会重新计算。
const getters = {
check(state){
return state.count<0 ? 0 :state.count；
}
在调用的时候通过这种格式即可
this.$store.getters.check
网友评论