Vue状态管理

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:132 发布时间:2019-05-10
摘要:1、导出Vuex 每个Vuex应用的核心就是store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态(state)。 Vuex和单纯的全局对象有以下两点不同: 1.Vuex的状态存储是

1、导出Vuex

每个Vuex应用的核心就是store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态(state)。
Vuex和单纯的全局对象有以下两点不同:
1.Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应地得到高效更新。
2.你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。
简单创建使用示例

import Vuex from 'vuex'
//如果在模块化构建系统中,要确保在开头调用Vue.use(Vuex)
const store= new Vuex.Store({
state:{
count:0
},
mutations:{
addcount(state){
state.count  
}
}
})

2、定义store

通过store.state来获取状态对象,以及通过store.commit方法触发状态变更:

/*状态管理*/
const store = new Vuex.Store({
  state: {
    headerShow: true//是否显示头部
  },
  mutations: {  //不应直接更改state,应通过mutations下的方法来更改状态
    setHeaderShow(state, newValue) {
      this.state.headerShow = newValue;
    }
  }
});
store.commit('addcount')
console.log(store.state.count) //1

3、将store注入

强调,通过提交mutation的方式,而非直接改变store.state.count,是因为想更明确地追踪到状态的变化。
由于store中的状态是响应式的,在组件中调用store中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的methods中提交mutation。
本文来源vuex官网

new Vue({
  store,//把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  render: h => h(App)
}).$mount('#app-box')

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:Vue状态管理

关键词:

频道精选

最火资讯