关于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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
js Math 对象的方法
Sep 01 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
js瀑布流布局的实现
Jun 28 Javascript
详解基于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
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python、Javascript中的闭包比较
2015/02/04 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python elasticsearch环境搭建详解
2019/09/02 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
介绍一下write命令
2012/09/24 面试题
学生会竞选自荐信
2013/10/12 职场文书
创业计划书如何编写
2014/02/06 职场文书
学前班学生评语
2014/12/29 职场文书
校本研修个人总结
2015/02/28 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Django debug为True时,css加载失败的解决方案
2021/04/24 Python