郑州做网站好的公司,wordpress全站备份,购物商城图片,网站系统设计说明书六、Vuex
6.1 Vuex是什么
概念#xff1a;专门在 Vue 中实现集中式状态#xff08;数据#xff09;管理的一个 Vue 插件#xff0c;对 vue 应 用中多个组件的共享状态进行集中式的管理#xff08;读/写#xff09;#xff0c;也是一种组件间通信的方 式#xff0c;且…六、Vuex
6.1 Vuex是什么
概念专门在 Vue 中实现集中式状态数据管理的一个 Vue 插件对 vue 应 用中多个组件的共享状态进行集中式的管理读/写也是一种组件间通信的方 式且适用于任意组件间通信。Github 地址: https://github.com/vuejs/vuex
6.1.2 什么时候使用 Vue
多个组件依赖于同一状态来自不同组件的行为需要变更同一状态
6.1.3 案例 6.1.4 Vuex 工作原理图 6.2 vuex 核心概念和 API
6.2.1 state vuex 管理的状态对象 它应该是唯一的 示例代码
6.2.3 action 值为一个对象包含多个响应用户动作的回调函数 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state 如何触发 actions 中的回调 可以包含异步代码定时器, ajax 等等 示例代码
6.2.3 mutations 值是一个对象包含多个直接更新 state 的方 .谁能调用 mutations 中的方法如何调用 mutations 中方法的特点不能写异步代码、只能单纯的操作 stat 示例代码
6.3 四个map方法的使用
6.3.1 mapState方法
用于帮我们映射state中的数据为计算属性。 computed:{//借助mapState生成计算属性从state中读取数据。对象写法...mapState({sum:sum,school:school,student:student}),//借助mapState生成计算属性从state中读取数据。数组写法...mapState([school,sum,student]),}6.3.2 mapGetters方法
用于帮助我们映射getters中的数据为计算属性 computed:{//借助mapGetters生成计算属性从state中读取数据。对象写法...mapGetters({bigSum:bigSum}),//借助mapGetters生成计算属性从state中读取数据。数组写法...mapGetters([bigSum])}6.3.3 mapActions方法
用于帮助我们生成与 actions 对话的方法即包含$store.dispatch(xxx) 的函数
methods:{//借助mapActions生成对应的方法方法中会调用 dispatch 去联系 actions 对象写法...mapActions({incrementOdd:incrementOdd,incrementWait:incrementWait}),//借助mapActions生成对应的方法方法中会调用 dispatch 去联系 actions 数组写法...mapActions([incrementOdd,incrementWait])},6.3.4 mapMutations方法
用于帮助我们生成与mutations对话的方法即包含$.store.commit(xxx)的函数
methods:{//借助mapMutations生成对应的方法方法中会调用commit去联系mutations对象写法...mapMutations({decrement:DECREMENT,increment:INCREMENT}),//借助mapMutations生成对应的方法方法中会调用commit去联系mutations数组写法...mapMutations([DECREMENT,INCREMENT]),},mapActions与mapMutations使用时若需要传递参数需要在模板中绑定事件时传递好参数否则参数是事件参数
