Open Qhappyman opened 5 years ago
官方文档的定义:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 附一张图来理解: Vuex是一种设计思想。每一个Vuex应用的核心就是Store(仓库)。组件的状态和数据都放到一个统一的内存空间state去管理,state的数据映射到组件上,当组件的数据发生变化时,通过Dispatch Actions或者直接Commit Mutations的方法修改state。我们不能直接改变state中的状态。改变state中状态的唯一途径就是显式的提交(Commit)Mutations。这样使得我们可以方便的追踪每一个状态的变化,从而使我们能够实现一些功能帮助我们更好的了解我们的应用。state修改后反映到组件上,形成闭环。 当以往父子组件通信的时候,我们通常会采用props+emit的方式。vuex适合更为复杂的使用场景。比如:
state定义了应用状态的数据结构,同样可以在这里设置默认的初始状态。
getters就是从state中派生出状态,比如获取state中todoLists的总数。类似vue中计算属性(computed)
mutations是唯一允许更新应用状态的地方。类似vue中的$on事件:每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。
ctions定义提交触发更改信息的描述,在actions中可做任意异步操作,常见的例子有从服务端获取数据,在数据获取完成后会调用store.commit()(类似vue中$emit)来调用更改 Store 中的状态。可以在组件中使用dispatch来发出 Actions。
Vuex.mapState(map: Array | Object): Object 创建组件的计算属性返回 Vuex store 中的状态。
Vuex.mapGetters(map: Array | Object): Object 创建组件的计算属性返回 getter 的返回值。
Vuex.mapActions(map: Array | Object): Object 创建组件方法分发 action。
Vuex.mapMutations(map: Array | Object): Object 创建组件方法提交 mutation。
这个问题是很好的,不过更推荐在熟练使用vuex以后去了解底层是如何实现这些功能的
官方文档的定义:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 附一张图来理解: Vuex是一种设计思想。每一个Vuex应用的核心就是Store(仓库)。组件的状态和数据都放到一个统一的内存空间state去管理,state的数据映射到组件上,当组件的数据发生变化时,通过Dispatch Actions或者直接Commit Mutations的方法修改state。我们不能直接改变state中的状态。改变state中状态的唯一途径就是显式的提交(Commit)Mutations。这样使得我们可以方便的追踪每一个状态的变化,从而使我们能够实现一些功能帮助我们更好的了解我们的应用。state修改后反映到组件上,形成闭环。 当以往父子组件通信的时候,我们通常会采用props+emit的方式。vuex适合更为复杂的使用场景。比如:
Vuex的核心
Vuex.Store构造器
state定义了应用状态的数据结构,同样可以在这里设置默认的初始状态。
getters就是从state中派生出状态,比如获取state中todoLists的总数。类似vue中计算属性(computed)
mutations是唯一允许更新应用状态的地方。类似vue中的$on事件:每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。
ctions定义提交触发更改信息的描述,在actions中可做任意异步操作,常见的例子有从服务端获取数据,在数据获取完成后会调用store.commit()(类似vue中$emit)来调用更改 Store 中的状态。可以在组件中使用dispatch来发出 Actions。
ctions定义提交触发更改信息的描述,在actions中可做任意异步操作,常见的例子有从服务端获取数据,在数据获取完成后会调用store.commit()(类似vue中$emit)来调用更改 Store 中的状态。可以在组件中使用dispatch来发出 Actions。
Vuex辅助函数
Vuex.mapState(map: Array | Object): Object
创建组件的计算属性返回 Vuex store 中的状态。
Vuex.mapGetters(map: Array | Object): Object
创建组件的计算属性返回 getter 的返回值。
Vuex.mapActions(map: Array | Object): Object
创建组件方法分发 action。
Vuex.mapMutations(map: Array | Object): Object
创建组件方法提交 mutation。