关于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小框架 fly javascript framework
Nov 26 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
代码整洁之道(重构)
Oct 25 Javascript
vue中监听返回键问题
Aug 28 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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中目录,文件操作详谈
2007/03/19 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
学校大课间活动方案
2014/01/30 职场文书
策划创业计划书
2014/02/06 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
在 Python 中利用 Pool 进行多线程
2022/04/24 Python