Vuex
什么是Vuex?
Vuex是一种状态管理模式,说白了Vuex就是数据管理的模式,它是管理数据的。
什么时候用Vuex?
多个组件需要共享同一数据,让它们保持一致。比如 购物车。还有用户信息(用户id,用户名称,用户手机,用户邮箱,这些也可以都放在vuex中进行统一管理)
Vuex解决了一个问题:保持多个组件之间数据一致。
store: 俗称 仓库,这个仓库里面放的是 一些数据 和 对数据的操作。
state: 仓库中的数据都放在这里,很像vue中的data; 状态 数据源 都是指它, 在这里的数据就像一个全局变量
mutation: 修改state中的数据, mutation里必须是同步操作
action: 它和mutation几乎一样,在action里可以执行异步操作
getter: 获取数据,得到数据。 虽然this.$store.state.xxx可以直接获取state中的数据,但是我们经常对拿到的数据做一些处理,例如 格式化 或者 过滤数据,这时候就要用到getter了。
获取state中的数据: this.$store.state.xxx
调用mutations中的方法:this.$store.commit('xxx')
调用action中的方法: this.$store.dispatch('xxx')
获取getters中的方法: this.$store.getters.xxx
var store = new Vuex.Store({ state:{ //vuex中全局共享的数据 在任何一个组件中,都可以使用state中的数据 cartCount:0 // 通过 this.$store.state.cartCount 获取数据 }, mutations:{ //修改vuex中全局共享数据 ,修改state中的数据 increament(state){ state.cartCount++ }, //通过 this.$store.commit('updateCount') 调用mutations中的方法 updateCount(state,c){ state.cartCount+=c } }, getters:{//获取vuex中全局共享数据 getCartCount(state){ return state.cartCount; } } })