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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
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
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
PHP输入流php://input介绍
2012/09/18 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
php中请求url的五种方法总结
2017/07/13 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
python实现简单的TCP代理服务器
2014/10/08 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Python----数据预处理代码实例
2019/03/20 Python
python同步windows和linux文件
2019/08/29 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
兼职业务员岗位职责
2014/01/01 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
连带责任保证书
2014/04/29 职场文书
办理房产过户的委托书
2014/09/14 职场文书
街道务虚会发言材料
2014/10/20 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL