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 函数对象的多重身份
Jun 28 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
微信小程序页面间跳转传参方式总结
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中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python实现的config文件读写功能示例
2019/09/24 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
学期自我鉴定
2013/11/04 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
前处理组长岗位职责
2014/03/01 职场文书
安全生产目标责任书
2014/04/14 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
教师党员整改措施
2014/10/24 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技