Vuex详解以及使用

Vuex详解以及使用

组件之间共享数据的方式：
父向自传值： v-bind属性绑定
子向父传值：v-on事件绑定
兄弟组件之间共享数据：EventBus
$on 接收数据的那个组件
$emit发送数据的那个组件 VUEX是实现全局状态管理的机制，可以实现数据的共享 Vuex统一管理状态的好处： 能够在vuex中集中管理共享的数据，易于开发和后期的维护 能够高效的实现组件之间的数据共享，提高效率 存储在vuex中的数据都是响应式的，能够实时保持数据域页面的同步 一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件的私有数据依旧存储在组件自身的data即可 State：提供唯一的公共数据源，所共享的数据都要统一放到Store的state中存储 const store = new Vuex.Store({ state:{ //shuju count: 0 } }) //第一种组件访问State中数据 this.$store.state.全局数据名称
//第二种组件访问State中数据
1.从Vuex中按需导入mapState函数 import { mapState } from ‘vuex’
2.通过刚刚导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed属性
computed: { …mapState([‘count’])}

Mutation:用于变更Store中的数据
只能通过mutation变更store数据，不可以直接操作Store中的数据
通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化
mutations: {
//里面的参数可以传多个，此处只是举例
add(state) {
//变更状态
state.count++
}
}
在组件的methods中触发通过this.$store.commit(‘add’)
//第二种从vuex按需导入mapMutations函数，将需要的Mutations函数映射为当前组件的
methods: { …mapMutations({‘add’})}

不要在mutations中执行异步操作，通过action
Action用于处理异步任务（必须通过Action,而不能用mutations)但Action中还是要触发Mutation的方式间接变更数据
actions: {
addAsync(context) {
setTimeout( () => {
context.commit(‘add’)
},1000)
}
}
//第一种触发组件触发methods中触发this.$store.dispatch(‘addAsync’)
//第二种触发从vuex中导入mapActions函数，将指定的action函数映射为当前组件的methods函数
methods: { …mapActions([‘addAsync’])}

Getter用于对Store中的数据进行加工处理形成新的数据（类似vue的计算属性）
Store中的数据发生变化，Getter的数据也会跟着变化
//定义Getter
const store = new Vuex.Store({
state:{count:0},
getter: {
showNum: state => {return ‘当前最新的数量是【’+ state.count + ‘】’}
}
})
//组件触发在methods通过this.$store.getters.名称
import { mapGetter } from ‘vuex’
computed: { …mapGetters([‘showNum’])}

在template里面this可以省略。一般在created中发起数据请求