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 相关文章推荐
jQuery Clone Bug解决代码
Dec 22 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
Vue实现验证码功能
Dec 03 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
最新最全的手机号验证正则表达式
Feb 24 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计算上一个月的今天
2013/05/23 PHP
PHP中->和=>的含义及使用示例解析
2020/08/06 PHP
如何让页面加载完成后执行js
2013/06/26 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
Python实现合并两个列表的方法分析
2018/05/28 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Python之字典添加元素的几种方法
2020/09/30 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
上学迟到的检讨书
2014/01/11 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
军训 自我鉴定
2014/02/03 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
教师求职信
2014/06/17 职场文书
物理教育专业求职信
2014/06/25 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
学校运动会通讯稿
2015/07/18 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis