关于vue、vuex的一些初步小结

joywek 发布于2019-08-21 17:55 / 1044人阅读

摘要：只能是同步函数，原因是无法捕捉异步函数的快照。除了这三个概念外，还有类比计算属性，用于从派生出一些值分割较大的状态树，便于管理。处理表单可手动监听或是使用带的双向绑定计算属性。

一、Vue组件的创建

一般语法：

Vue.component(tagName, options)

务必在根组件实例化之前注册组件

组件options说明：

data: 必须是一个函数，目的在于返回独立的对象，保证组件之间的数据不互相影响

components: 局部注册一个组件，仅在当前组件作用域内可用

props: 用于父组件向子组件传递数据时使用，可传静态属性，也可传动态的（数据绑定，父组件数据变化引起子组件数据相应变化），一次性传递所有属性可采用v-bind指令

computed: 计算属性，在部分情况下可以代替watch的功能，也可用于:class的动态绑定

watch: 即属性侦听器，接受参数newData, oldData，含义顾名思义

methods: 定义组件内的方法

生命周期函数：beforeCreate, created, beforeMount, mounted, updated, beforeDestroy, destroyed，其具体含义可参照官方文档

二、组件间数据传递

来看看文档里一段值得参考的语法（位置：组件-自定义事件-.sync修饰符）：

:foo="bar"即父组件向子组件传递属性foo，vue中采用单向数据流，这里是为了让父组件的数据和数据的改动（若有的话）传递到子组件上，供子组件使用

update为vue生命周期函数，在数据变化前调用

这里update部分事实上为v-on的缩写，作用是监听子组件中foo的改变并调用对应的处理器

子组件向父组件发布事件(emit)会触发父组件设置的监听器（如果你设置了的话）

好了，这里涉及的概念可能比较多，所以再多解释一下吧～为了逻辑上更加清新，vue是不推荐子组件改变父组件的数据的，主要是出于维护成本的考虑，这就是所谓的单向数据流。父组件可以通过改变prop影响子组件数据，而子组件可以通过emit触发父组件方法。

但是，如果这样的数据传递不仅仅限于父子组件之间，而是祖先与后代组件或是兄弟组件呢？显然这会是一件很麻烦的事，为了处理这种多状态、多通信的情形，我们引入了vuex。

三、vuex的使用

如果你之前使用过flux、redux等状态状态管理工具的话，那么应该会很容易理解这个工具是要做什么～

下面依次介绍一下state、mutation和action这三个核心概念：

state

是一个持久化存储的状态，不归属于vue的某个特定组件，除非刷新页面，否则数据不会消失～

在根实例中注册store，下发到所有子组件，使用如下：

computed: {
  count () {
    return this.$store.state.count
  }
}

如果想要简化定义，使用mapState辅助函数就可，使用时从vuex引入该方法就可。

mutation

state的值不能直接被操作，想要改变它必须通过提交mutation的形式进行，方式为：

store.commit("something", payload)

注意一下第二个参数，这是以载荷形式提交参数，参数最多一个，想传多个参数的话必须以对象的形式提交。

mutation只能是同步函数，原因是devtool无法捕捉异步函数的快照。

action

为了执行异步操作，vuex引入了action来完成这一工作，调用方式是用dispatch方法，简化写法与state和mutation是类似的，值得看看的是将它和es6的promise和es7的async与await结合起来的工作原理：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit("someMutation")
        resolve()
      }, 1000)
    })
  }
}

这个action返回了一个Promise对象，可以在后续进行处理，同时action中也可以调用其他异步action。

除了这三个概念外，还有getter（类比计算属性，用于从state派生出一些值）、module（分割较大的状态树，便于管理）。

处理表单可手动监听input、change或是使用带setter的双向绑定计算属性。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90211.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
vuex在重构Cnode项目中的运用

摘要：定义需要状态的参数变量，状态变更用于改变的状态，注意中是不能直接改变中的状态的，一定要借助于的事件分发。而在中进行事件的分发就可以进行异步操作。当然还有许多的地方可以用到，比如说在本项目的弹窗组件也用到了，来根据具体情境显示对应的提示文本。写在文章前：在第一版初步实现cnode的基本功能后，本来是用本地存储的存储用户登录成功返回的用户的基本信息，用于后面的回复功能，查看信息等操作需...

trilever 2019-08-20 10:42 评论0 收藏0