vue store之状态管理模式的详细介绍


Posted in Javascript onJune 13, 2019

状态管理

一、状态管理(vuex)简介

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

Vuex 的思想

当我们在页面上点击一个按钮,它会处发(dispatch)一个action, action 随后会执行(commit)一个mutation, mutation 立即会改变state, state 改变以后,我们的页面会state 获取数据,页面发生了变化。 Store 对象,包含了我们谈到的所有内容,action, state, mutation,所以是核心了

官方demo

const store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment (state) {
   state.count++
  }
 }
})

二、状态管理核心状态管理有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.dispatch5、module module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。

简单的 store 模式

var store = {
 debug: true,
 state: {
  message: 'Hello!'
 },
 setMessageAction (newValue) {
  if (this.debug) console.log('setMessageAction triggered with', newValue)
  this.state.message = newValue
 },
 clearMessageAction () {
  if (this.debug) console.log('clearMessageAction triggered')
  this.state.message = ''
 }
}

所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生,以及它们是如何被触发。当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。

此外,每个实例/组件仍然可以拥有和管理自己的私有状态:

var vmA = new Vue({
 data: {
  privateState: {},
  sharedState: store.state
 }
})

var vmB = new Vue({
 data: {
  privateState: {},
  sharedState: store.state
 }
})

vue store之状态管理模式的详细介绍

三.在?目中使用

1.store文件夹一般有以下6个文件。

vue store之状态管理模式的详细介绍

2.在文件中引入:(新建一个store文件夹,在文件夹下的index.js文件进行如下编写)

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

3.定义简单模块:

const module = {
  state: {
    user: {
      name: 'rookie'
    }
  },
  getters: {},
  mutations: {
    setUser(state, payload){
      if(payload.hasOwnProperty('name')){
        state.user.name = payload.name
      }
    }
  },
  plugins: [createPersistedState()]
}

上面是一个简单的vuex,在vuex中对应的store应用,在store中包含组件的共享状态state和改变状态的方法(暂且称作方法)mutations。注意state相当于对外的只读状态,不能通过store.state.user.name来更改,使用store.commit方法通过触发mutations改变state。

在页面中获取记录的值name为rookie:

mounted(){
  console.log(this.$store.state.user.name);
}

store.state为获取store中的值,此时在my页面中打印出来的值为rookie,而我们想要修改name的值,则需要借助store.commit方法来触发mutations:

this.$store.commit('setUser',{name: 'kuke_kuke'})

在mutations中找到setUser,第二个参数payload为传入的对象{name: ‘kuke_kuke'},调用方法hadOwnProperty来判断传入的对象是否有name属性,从而修改state中的值,此时在页面中再次打印user.name的值为'kuke _ kuke'。
最后导出模块:

const store = new Vuex.Store(module)
export default store

在main.js中获取模块并使用:

import store from './store'
new Vue({
  store
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
用客户端js实现带省略号的分页
Apr 27 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
vue内置指令详解
Apr 03 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 #Javascript
微信小程序位置授权处理方法
Jun 13 #Javascript
json数据格式常见操作示例
Jun 13 #Javascript
微信小程序实现渐入渐出动画效果
Jun 13 #Javascript
微信小程序前端自定义分享的实现方法
Jun 13 #Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 #Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 #Javascript
You might like
让PHP支持页面回退的两种方法
2008/01/10 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
js函数的引用, 关于内存的开销
2012/09/17 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
python爬取网易云音乐评论
2018/11/16 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
selenium如何定位span元素的实现
2021/01/13 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
Intersport西班牙:在线体育商店
2019/11/06 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
C++的几个面试题附答案
2016/08/03 面试题
制衣厂各岗位职责
2013/12/02 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
社区中秋节活动方案
2014/01/29 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
工作会议方案
2014/05/21 职场文书
2014年教师节寄语
2014/08/11 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫