关于vuex的学习实践笔记


Posted in Javascript onApril 05, 2017

Vuex 简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

例如(travel store):

import * as types from '../types'
//数据
const state = {
 travelsList: [],
 searchKey: {
  page: 0,
  limit: 20
 },
 scroll: true
}
//用户行为(可以处理异步),触发 mutations 来改变 state
const actions = {
 /**
  * 获取约跑步列表
  */
 getTravelsList({ commit }) {
  if(state.scroll) {
   commit(types.GET_TRAVELS_PAGE_NUM)
   commit(types.COM_LOADING_STATUS, true),
   commit(types.GET_TRAVELS_SCORLL_STATUS, false)
   api.TravelsList()
    .then(res => {
     console.log(res)
     commit(types.COM_LOADING_STATUS, false),
     commit(types.GET_TRAVELS_SCORLL_STATUS, true)
     commit(types.GET_TRAVELS_LIST, res)
    })
  }
 },
 /**
  * 参加
  */
 joinTravel({ commit }, id) {
 ...
 }
}
//可以过滤 state 中的数据
const getters = {
 travelsList: state => state.travelsList,
 travelListIndex: state => state.travelsList.slice(0,4)
}
//唯一能改变 state 的方法(纯函数)
const mutations = {
 [types.GET_TRAVELS_LIST](state, res) {
  if(state.searchKey.page <= 1) {
   state.travelsList = res.data
  } else {
   state.travelsList = state.travelsList.concat(res.data)
  }
 },
 [types.GET_TRAVELS_SEARCH_KEY](state, params) {
  state.searchKey = params
 },
 [types.GET_TRAVELS_PAGE_NUM](state) {
  state.searchKey['page'] += 1
 },
 [types.GET_TRAVELS_SCORLL_STATUS](state, status) {
  state.scroll = status
 }
}
//导出一个 travel store 模块
export default {
 state,
 actions,
 getters,
 mutations
}

每一个 Vuex 应用的核心就是 store(仓库)。”store” 基本上就是一个容器,它包含着你的应用中大部分的状态(state)数据。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

用一张图来理解一下

关于vuex的学习实践笔记

客户端(Client) -> action -> mutations -> state -> 客户端

可以看出在vuex中数据是单一流向的:视图(view)触发action,action提交(commit)到mutations,mutations改变state(数据),state的改变,相应的组件也会相应的更新。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS 控件事件小结
Oct 31 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
jQuery中库的引用方法
Jan 06 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
vue遍历对象中的数组取值示例
Nov 07 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
详解基于webpack和vue.js搭建开发环境
Apr 05 #Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 #Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 #Javascript
Vue.js render方法使用详解
Apr 05 #Javascript
self.attachevent is not a function的解决方法
Apr 04 #Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 #Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 #Javascript
You might like
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
pandas 读取各种格式文件的方法
2018/06/22 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
老师给学生的表扬信
2014/01/17 职场文书
二手房购房意向书范本
2014/04/01 职场文书
园林系毕业生求职信
2014/06/23 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
大一新生期末自我评价
2014/09/12 职场文书
护士岗位竞聘书
2015/09/15 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android