Vue 状态管理

类flux状态管理的官方实现

由于多个状态分散的跨越在许多组件和交互间的各个角落,大型应用复杂度也经常逐渐增长。

为了解决这个问题,vue提供了vuex:我们有收到elm启发的状态管理库,vuex甚至集成到vue-detools。无须配置即可访问时光旅行。

简单状态管理起步使用

经常被忽略的是,Vue应用中原始数据对象的实际来源-当访问数据对象时,一个vue实例只是简单的代理访问。所以,如果你有一处需要被多个实例间共享的状态,可以简单的通过维护一份数据来实现共享:

const sourceOfTruth = {}

const vmA = new Vue({

data:sourceOfTruth

})

const vmB = new Vue({

data:sourceOfTruth

})

现在当sourceOfTruth发生变化,vmA和vmB都将自动的更新引用他们的视图。子组件们的每个实例也会通过this.$root.$data去访问。现在我们有了唯一的实际来源,但是调试会成为噩梦。任何时间,我们应用中的任何部分,在任何数据改变后,都不会留下变更过的纪录。

为了解决这个问题,我们采用一个简单的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(‘setMessage 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

}

})

重要的是,注意你不应该在action中替换原始的状态对象-组件和store需要引用同一个共享对象,mutation才能够被观察

组件不允许直接修改属于store实例的state,而应执行action来分发(dispatch)事件通知store去改变,我们最终达成了flux架构。这样约定的好处是,我们能够纪录所有store中发生的state改变,同时实现能做到纪录变更(mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。

时间: 2024-10-29 14:12:52

Vue 状态管理的相关文章

Vue状态管理vuex

转: https://www.cnblogs.com/xiaohuochai/p/7554127.html 前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 Vue 实例只是简单的代理访问.所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享 const sourceOfTruth = {} const vmA = new

Vue状态管理之Vuex

Vuex是专为Vue.js设计的状态管理模式.采用集中存储组件状态它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.首先让我们从一个vue的计数应用开始 new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.co

vue状态管理(vuex)

vuex,官方定义为状态管理,其实这个状态管理,和H5本地缓存的作用很相似,通俗的讲,就是存储一些公用的东西,提供给各个组件使用,和服务器端的session功能也很类似. 不同的是,vuex在刷新页面的时候,会自动还原到初始的状态,话不多说,我们直接上干货: 1.安装vuex:npm install vuex --save 2.需要在man.js中引用如下代码 import Vue from 'vue' import App from './App' import router from './

Vue学习日记(四)——Vue状态管理vuex

前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰到下面这些问题: 当路由切换的时候,原本路由的数据太多,传递过去太麻烦. 有些数据是多个路由需要用到的,那我就需要从后台获取多次数据 当然,这些问题都可以解决,就是在实例化vue对象的时候,就将这些数据绑定在window对象上面.但是我们也不得不设想: 万一数据太多了,那么可阅读性是不是会下降 如果

vue状态管理,配置vuex

Vue项目中经常会有对状态的控制操作,那么如何合理的封装使用呢? main.js 引入store //main.js import store from './store'; const app = new Vue({ router, store, ... }) 创建store文件夹,新建index.rootState.getters.actions.mutations文件 ├── src │ ├── main.js │ └── store │ |——index.js │ |——rootStat

Vue中状态管理——Vuex

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{ count }} </div`, // actions methods: { increment () { this.count++ } } }) 其中 state

vue组件化开发-vuex状态管理库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

vue从入门到进阶:Vuex状态管理(十)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动安装: <script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script> 可以通过 https://unpkg.com/[em

Vuex ~ 专门为vue.js设计的集中式状态管理架构

状态:data中的属性需要共享给其他vue组件使用的部分(即data中需要共用的属性) 1.初识vuex直接来个小demo 下面操作都是基于vue-cli,如果不了解先学习下vue-cli 利用npm包管理工具,进行安装 vuex. npm install vuex --save 新建一个vuex文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex. import Vue from 'vue'; import Vuex from 'vuex';   使