每个Vuex应用的核心就是store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态(state)。
Vuex和单纯的全局对象有以下两点不同:
1.Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应地得到高效更新。
2.你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。
简单创建使用示例
//如果在模块化构建系统中,要确保在开头调用Vue.use(Vuex)
const store= new Vuex.Store({
state:{
count:0
},
mutations:{
addcount(state){
state.count++
}
}
})
通过store.state来获取状态对象,以及通过store.commit方法触发状态变更:
store.commit('addcount')
console.log(store.state.count) //1
强调,通过提交mutation的方式,而非直接改变store.state.count,是因为想更明确地追踪到状态的变化。
由于store中的状态是响应式的,在组件中调用store中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的methods中提交mutation。
本文来源vuex官网