为什么使用Vuex

时间: 2017-11-20阅读: 5314标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

vue 中vuex的最简单使用

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

关于Vuex的action传入多个参数的问题

已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成,然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数

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

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

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

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

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

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

vue单页面应用刷新网页后vuex的state数据丢失的解决方案

其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。一种是state里的数据全部是通过请求来触发action或mutation来改变

vue.js路由与vuex数据模型设计

本则路由考虑验证进入登录页面,完成登录操作进入首页。使用enter键切换频道

Vuex状态管理,state、getter

首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:接下来,在 main.js里面引入store,然后再全局注入一下

页面刷新时vuex数据持久化问题的解决方案

vuex是在中大型项目中必不可少的状态管理组件,刷新会重新更新状态,但是有时候我们并不希望如此。例如全局相关的,如登录状态、token、以及一些不常更新的状态等,我们更希望能够固化到本地,减少无用的接口访问,以及更佳的用户体验。

Vuex与组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。也就是说 Vuex 用于单页面应用组件之间的数据共享,在组件嵌套很多层的情况下,Vue 中父子组件的通信过程就变得很麻烦,此时使用 Vuex 方便了组件间的通信。

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广