关于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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
js计算页面刷新的次数
Jul 20 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
javaScript动态添加Li元素的实例
Feb 24 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
PHP+MySQL删除操作实例
2015/01/21 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
AngularJS中$http的交互问题
2017/03/29 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
Koa项目搭建过程详细记录
2018/04/12 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
python调用cmd复制文件代码分享
2013/12/27 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
Python分支结构(switch)操作简介
2018/01/17 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
Python处理PDF与CDF实例
2020/02/26 Python
Python自省及反射原理实例详解
2020/07/06 Python
python 生成器需注意的小问题
2020/09/29 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
法人授权委托书
2014/04/03 职场文书
学校安全防火方案
2014/06/07 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
Python制作春联的示例代码
2022/01/22 Python