vue.js的状态管理vuex中store的使用详解


Posted in Javascript onNovember 08, 2019

一、状态管理(vuex)简介

vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。

二、状态管理核心

状态管理有5个核心,分别是state、getter、mutation、action以及module。分别简单的介绍一下它们:

1、state

state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue.js的组件中才能获取你定义的这个对象的状态。

2、getter

getter有点类似vue.js的计算属性,当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算。

3、mutation

更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。

4、action

action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action,则需要执行store.dispatch

5、module

module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。

三、实例

首先建立一个vue.js项目,然后引入vuex

npm install vuex --save

而后建立一个store文件夹,建立一个store.js。在store.js中引入vue和vuex、在有需要的时候可以引入axios。

import vue from 'vue'

import vuex from 'vuex'

vue.use(vuex)

const state={

  userList:[]

}



const mutations={

  setUserList(state,data){

    state.userList=data;

    (注:如果这里的userList需要axios请求也可以把axios写在等号后面)

  }

}



const action={

  commitUserList:({commit},userList)=>commit('setUserList',userList)

}

这样一个简单的store.js就已经完成了。

在界面中我们要怎么使用这个建立的状态管理呢:

首先在script下引入store.js

<script>

import store from 'store.js的路径'

data(){

  return{

    userList:store.state.userList;//引入state中的对象

  }

},

methods:{

  useAction(){

      var item=['1':'2','a':'c'];

      store.dispatch('setUserList',item);

  }

}

</script>

以上这篇vue.js的状态管理vuex中store的使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 #Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 #Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 #Javascript
Vue打包后访问静态资源路径问题
Nov 08 #Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 #Javascript
js 对象使用的小技巧实例分析
Nov 08 #Javascript
JS对日期操作封装代码实例
Nov 08 #Javascript
You might like
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP处理会话函数大总结
2015/08/05 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
轮播图组件js代码
2016/08/08 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
Python如何测试stdout输出
2020/08/10 Python
几个人围成一圈的问题
2013/09/26 面试题
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
2014年销售员工作总结
2014/12/01 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python