内容简介:什么情况下适合使合vuex?Vuex使用中有几个步骤?开始之前先简单了解一下vuex定义: vuex是一个状态管理机制,采用集中式存储应用所有组件的状态
20190121
什么情况下适合使合vuex?Vuex使用中有几个步骤?
开始之前先简单了解一下vuex
定义: vuex是一个状态管理机制,采用集中式存储应用所有组件的状态
嗯,就是一句话能说明白的,没明白的,我们用代码再理解一下什么叫集中式式存储
比如下面这段代码,同时需要用到username,那么我们首先能想到就是在两个组件内都进行一次获取username的操作, 这种操作是有明显弊端的, 如带宽资源浪费,代码不好维护等等
// a.vue <template> <div>{{username}}</div> </template> // b.vue <template> <div>{{username}}</div> </template>
那么集中式是什么概念呢,就是把整个应用的状态独立出来当成一个树形结构管理,所有叶子数据的更改都使用唯一的通道进行操作,下面用代码再来理解一下
// a.vue <template> <div>{{username}}</div> </template> // b.vue <template> <div>{{username}}</div> </template> <script> computed: { username () { // store就是我们应用的集中管理器,跟组件解藕,需要的时候就用到,叫即插即用 return store.state.count } }, </script>
什么情况下适合使合vuex
老生常谈的话题,每个人的使用动机不同可能结果就不同,站在系统架构的角度上来,vuex虽然能很好帮助我们管理状态, 但随之也带来更多的概念让我们花时间来消化,一般情况下我们会根据项目的实际大小来决定是否需要引入vuex
Vuex使用中有几个步骤
先上一张图理解一下vuex工作的流程
从图中我们可以看到vuex包含了3个关键词
- state
- actions
- mutations
只要知道就行,后面再展开讲
先看下最简单使用vuex的方式
// store.js // store中管理store以及mutations, 然后在组件中通过commit来触发store中mutations的方法 const store = new Vuex.Store({ state: { name: 'JS' }, mutations: { updateName (state) { state.name = 'JS每日一题' } } }) // a.vue store.commit('updateName') // JS每日一题
state
字面意思就是状态,上面也说了vuex是集中式管理, 那么在这里就理解成为集中管理的状态(全局可使用状态)
组件中获取状态可以通过以下方式
const Demo = { template: `<div>{{ name }}</div>`, computed: { name () { return store.state.name } } } // 也可以通过mapState 辅助函数来获取 computed: mapState({ name: state => state.name }) // 引入多个state可以通过对象展开运算符来获取 computed: { ...mapState({ name // ... }) }
mutations
更改vuex中的store的唯一途径就是mutation,且必须是同步函数
代码理解
// 首先mutations 是一个对象 // 下面的updateName 展开写就是 updateName : function(){}, 在vuex叫做Type Handler // 根据上一条的解释,所以会看到很多mutations的写法类 [GET_USER_INFO] : (state) => {} // 你不能直接调用mutations.updateName, 因为mutations 只负责注册事件,需要通过store.commit(type) 来唤醒对应type的handler // Mutation 需遵守 Vue 的响应规则,也就是说没有被Object.defineProperty 劫持到的state不会响应式, 比如你有一个state为obj = {}, 然后你通过mutation来为obj新增一个属性, 这时候你需要替换原有的obj组件才会正常响应, 常用的方式可以通过Object.assign() mutations: { updateName (state) { state.name = 'JS每日一题' } } // 组件中可以通过mapMutaions 辅助函数来映射关系 // 下面等同于 this.updateName() this.$store.commit('updateName') methods: { ...mapMutaions([ 'updateName', ... ]) }
Action
Action 类似于 mutation,提交的是 mutation,而不是直接变更状态。简单来说就是mutation只负责同步操作,action负责异步操作
mutations: { updateName (state) { state.name = 'JS每日一题' } }, actions: { // context是一个具有store 实例相同方法和属性的对象 getUserInfo (context) { setTimeout(() => { commit('updateName') }, 1000) } } // 组件中可以通过mapActions 辅助函数来映射关系 // 下面等同于 this.getUserInfo() this.$store.commit('getUserInfo') methods: { ...组件中可以通过mapActions([ 'getUserInfo', ... ]) }
总结
vuex是一种状态管理机制,将全局组件的共享状态抽取出来为一个store,以一个单例模式存在,应用任何一个组件中都可以使用,vuex更改state的唯一途径是通过mutation,mutation需要commit触发, action实际触发是mutation,其中mutation处理同步任务,action处理异步任务
关于JS每日一题
JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案
- 注 绝不仅限于完成当天任务,更多是查漏补缺,学习群内其它同学优秀的答题思路
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入理解C#(第3版)
斯基特 (Jon Skeet) / 姚琪琳 / 人民邮电出版社 / 2014-4-1 / 99.00元
本书是世界顶级技术专家“十年磨一剑”的经典之作,在C#和.NET领域享有盛誉。与其他泛泛介绍C#的书籍不同,本书深度探究C#的特性,并结合技术发展,引领读者深入C#的时空。作者从语言设计的动机出发,介绍支持这些特性的核心概念。作者将新的语言特性放在C#语言发展的背景之上,用极富实际意义的示例,向读者展示编写代码和设计解决方案的最佳方式。同时作者将多年的C#开发经验与读者分享,读者可咀其精华、免走弯......一起来看看 《深入理解C#(第3版)》 这本书的介绍吧!
CSS 压缩/解压工具
在线压缩/解压 CSS 代码
随机密码生成器
多种字符组合密码