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+json 通用三级联动下拉列表
Apr 19 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
js tab栏切换代码实例解析
Sep 03 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
第一节--面向对象编程
2006/11/16 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php常用数学函数汇总
2014/11/21 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
简述JS控制台的使用
2018/07/15 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python 列表理解及使用方法
2017/10/27 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
女大学生毕业找工作的自我评价
2013/10/03 职场文书
学校班班通实施方案
2014/06/11 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
python实现层次聚类的方法
2021/11/01 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技
vue修饰符.capture和.self的区别
2022/04/22 Vue.js