为什么使用Vuex

时间: 2017-11-20阅读: 6148标签: vuex

在学习vuex之前,先了解一下“单向数据流”


这个状态自管理应用包含以下几个部分:

state,驱动应用的数据源;
 view,以声明方式将 state 映射到视图; 
actions,响应在 view 上的用户输入导致的状态变化。(比如请求数据或者修改数据会导致数据源状态改变)  

但是遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏,而且特别不方便。

如果坚持使用,传参的方法对于多层嵌套的组件将会非常繁琐,各种各样的问题通常会导致无法维护的代码

所以我们把组件的共享状态抽取出来,以一个全局单例模式管理(惰性单例的设计模式)
每一个 vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

对,Vuex核心就是它的store,其中,有三个重要的部分,

State:通过它存取多个组件共享的数据
Mutations:通过这个对象中的方法,可以改变State中的数据,但在这之前,必须通过显式地提交(commit) 来触发其中的方法。
Actions:提交mutation,可以包含任意异步操作这一步不是必要的,前提是你不需要异步操作,例如ajax请求数据,

Vuex的使用和理解

以下内容基于vue-cli写的,请先完成这一步

通常Vuex会单独写在一个js文件中,

store.js

// 引入vue 和 vuex 模块
import Vue from 'vue'
import Vuex from 'vuex'
// 中间件,使用VueX作为Vue的一个参数
Vue.use(Vuex)

数据,类似组件中的data

const state = {
  // count: 0
}

计算属性,类似组件中的computed

const getters = {
  // evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

用户派发的行为,类似methods

const actions = {
  // increment: ({commit}) => commit('increment')
}

必须通过这一步来修改数据

const mutations = {
  // increment: ({count}) => {
  //   state.count++
  // }
}

导出这个对象

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

然后在main.js的Vue实例中,注册一个store(仓库)

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

接下来从组件(视图)开始,理解一下这个过程

Vue-component:

用户的特定行为(需要使用Vuex的情况) 会派发一个任务给Actions 或者直接给Mutations

写在App.vue组件中
HTMT

<div @click="add">
  {{ count }}
</div>

JS

methods: {
  add () {
    // 派发一个任务,叫做'increment'
    this.$store.dispatch('increment')
  }
}

Actions:

Actions是用户指定的行为,这里没有异步操作,所以直接commit到Mutations

const actions = {
  // const { commit } = store
  // commit === store.commit
  increment: ({commit}) => commit('increment')
  // es6的写法,它等同于这样:
  // increment ({commit}) {
  //   commit('increment')
  // }
}

Mutations:

Mutations如上所述,修改一下state的数据

const mutations = {
  increment: ({count}) => {
    state.count++
  }
}

state:

state的数据被改变

Vue-component:

最后回到了组件这里,通过计算属性获取到改变的数据并显示到页面上

count () {
  return this.$store.state.count
}

getters

另外,我们希望实现这么一个小的效果:count为偶数时为绿色,奇数时为红色,那么我们在store中通过getters实现(当然在组件中通过计算属性也可以实现,这里只是为了说明getters的作用)

const getters = {
  // evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

在App.vue中的computed中写上

evenOrOdd (state) {
  return this.$store.getters.evenOrOdd
}

在模板中补充一点:

:class="evenOrOdd"

和对应的css

.even {
  color: green;
}
.odd {
  color: red;
}

转载来源:https://segmentfault.com/a/1190000012070824

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/127

结合 Vue.observable 写一个简易 Vuex

作为 Vue 全家桶的一员,Vuex 的重要性不言而喻,不管是用来管理状态,还是封装 Controler 都很好用。不过在一些体量较小的项目中,为了几个简单的状态或者处理函数而引入 Vuex,就像是高射炮打蚊子,大材小用了

vuex的持久化

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应 用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.

nuxt中使用Vuex

在nuxt中使用Vuex,以模块方式引用——计数器为例,用computed监听Vuex中state的变化, 及时渲染到界面上。如果在data中接收Vuex的state

Vue.js学习,关于Vuex源码解析

Vuex是一个专门为Vue.js框架设计的、用于对Vue.js应用程序进行状态管理的库,它借鉴了Flux、redux的基本思想,将共享的数据抽离到全局,以一个单例存放,同时利用Vue.js的响应式机制来进行高效的状态管理与更新。

了解Vuex状态管理模式的理解强化指南

Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变

使用Vuex解决Vue中的身份验证

Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧。

Vuex映射

Vuex 是一把双刃剑。如果使用得当,使用 Vue 可以使你的工作更加轻松。如果不小心,它也会使你的代码混乱不堪。对 Vuex 中的映射是如何工作的以及为什么要使用它有了深刻的了解

vue 计算属性与vuex getters的传参

计算属性比method好的一点是计算属性依赖数据是否变化而执行,不是每一次都执行,效率比较高,为了复用代码可以给计算属性进行传参

vue中 Vuex

由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态

Vuex的数据重新加载页面后消失

一般我们在登录成功的时候需要把用户信息,菜单信息放置vuex中,作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!