vuex的属性
- state:管理项目中的数据,所有共享的数据都要统一放在state中进行存储
访问state中数据的方式:const store = new Vuex.store({ state: { count: 0; } })
1、this.$store.state.count
2、首先从vuex中导入mapState函数,通过mapState函数将当前组件所需的全局数据映射到computed计算属性import {mapState} from 'vuex'; computed: { ...mapState({'count'}) }
- getters:读取state中的数据,getter有点类似vue.js的计算属性。
- mutation:更改store中state状态,每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:
store.commit
- action:提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。在页面中如果我们要用这个action,则需要执行
store.dispatch
- module:将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。
非父子组件传值
1、新建index.js
2、a.vue组件中
3、b.vue
实现效果:
打开页面会在显示a,b组件中获取到的state中的公共数据,当在b.vue组件的input输入框中输入内容时,会同时改变两个组件的显示,相当于在b.vue组件中改变信息,a.vue组件中会接收到信息,并发生改变。