关于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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
vue实现自定义多选按钮
Jul 16 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python切片用法实例教程
2014/09/08 Python
快速入手Python字符编码
2016/08/03 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python有参函数使用代码实例
2020/01/06 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
Python实现自动整理文件的脚本
2020/12/17 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
护理自荐信
2013/10/22 职场文书
机关作风建设整改方案
2014/10/27 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js