vuex说明:

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

包含的内容:

  • state:驱动应用的数据源;
  • view:以生命方式将state映射到视图;
  • actions:响应在view上的用户输入导致的状态变化;

流程示意图



但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。

    对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。

    对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。

适用于型单页应用

安装vuex

npm i vuex

新建文件夹store,建议目录


Actions 和 mutation

  • mutation:(必须是同步函数)

    更改store中state值的唯一方法就是提交mutation,每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
 mutations: {
addNum(state) {
state.num ++
}
}

你可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload):在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读:

 mutations: {
addNum(state,Payload) {
state.num +=Payload.amount
}
}

不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:

//页面中的操作(一、不带参数)
methods:{
add(){
this.$store.commit('addNum')
}
}
//二、带参数的情况下
data(){
argument:{
amount:10
},
methods:{
add(){
this.$store.commit('addNum',this.arguments)
}
}
  • actions

    Action 类似于 mutation,不同在于:
  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。
 mutations: {
addNum(state,amount) {
state.num +=amount
},
someMutation(state) {
setTimeout(()=>{
state.count--
},1000)
}
},
actions: {
increment (context,args) {
context.commit('addNum',args)
}
},
//另一种写法
actions: {
increment ({commit},args) {
commit('addNum',args)
}
}

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters

分发Action

//页面中
methods:{
add(){
this.$store.dispatch('increment',this.pa.amount)
}
},

区别:

action和mutation都可以改变state中数据的状态,但是action可以处理异步函数可以在devtool中追踪数据变化,而mutation只可以处理同步函数,当处理异步函数的时候检测不到数据变化;

mutation 处理同步异步

 mutations: {
//同步
addNum(state,amount) {
state.num +=amount
},
//异步
someMutation(state) {
setTimeout(()=>{
state.count--
},1000)
}
}

页面中操作

<template>
<div>
<p @click="add">同步{{num}}</p>
<p @click="reduce">异步{{count}}</p>
</div>
</template>
methods:{
//同步
add(){
this.$store.commit('increment',this.pa.amount)
},
//异步
reduce(){
this.$store.commit('someMutation')
}
}

数据变化之前,浏览器中显示,devtool中的数据状态



当页面中的数据改变之后,追踪数据



action 处理同步异步

 mutations: {
addNum(state, amount) {
state.num += amount
},
someMutation(state) {
state.count--
}
},
actions: {
increment({commit}, args) {
commit('addNum', args)
},
actionSomemution(context) {
setTimeout(() => {
context.commit('someMutation')
}, 1000)
}
}

页面中

methods:{
add(){
this.$store.dispatch('increment',this.pa.amount)
},
reduce(){
this.$store.dispatch('actionSomemution')
}
},

数据变化之前,浏览器中显示,与devtool中数据显示



操作之后数据变化,



小结:mutation只能处理同步函数,在devtools检测不到状态树中数据的变化,而actions可以处理同异步数据,可以在devtools检测数据变化,这样就好理解了

vuex相关(actions和mutation的异曲同工)的更多相关文章

  1. Do not mutate vuex store state outside mutation handlers.

    组件代码: selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'sele ...

  2. vuex的state,mutation,getter,action

    开始!正常的简单的拆分下是这样的文件当然module可以在store下面新建一个文件夹用来处理单独模块的vuex管理比较合适. 1.index.js下面 import Vue from 'vue' i ...

  3. vuex相关知识点

    vuex简单理解转载博客 vuex从入门到入门------state:从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态------Getters:可以很容易地在任何组件中使用它- ...

  4. Vuex 的使用 State Mutation Getter Action

    import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); /*1.state在vuex中用于存储数据*/ var state={ cou ...

  5. [Vuex系列] - Actions的理解之我见

    Actions如何定义的 恕小端不才,对Action的总结如下: Action 可以提交mutation方法,通过mutation来改变state Action 函数可以接收一个context对象,通 ...

  6. vuex相关的知识

    vue的核心是store,它可以看作是一个容器,它包含着应用中的状态state(state,mutations,actions,getters, modules).它中的存储是响应式的,当store中 ...

  7. vuex 之既生‘mutation’何生‘action’

    vuex 中,action 及 mutation 均为操作数据的作用而存在,既然二者均可改变数据,为什么要分成两个方法来处理呢,因为: Mutation 必须是同步函数 mutations: { so ...

  8. mutation中修改state中的状态值,却报[vuex] do not mutate vuex store state outside mutation handlers.

    网上百度说是在mutation外修改state中的状态值,会报下列错误,可我明明在mutations中修改的状态值,还是报错 接着百度,看到和我类似的问题,说mutations中只能用同步代码,异步用 ...

  9. VUEX报错 [vuex] Do not mutate vuex store state outside mutation handlers

    数组 错误的写法:let listData= state.playList; // 数组深拷贝,VUEX就报错 正确的写法:let listDate= state.playList.slice(); ...

随机推荐

  1. (转)Sql Server 保留几位小数的两种做法

    原文地址:http://blog.csdn.net/skyandcode/article/details/23523815 问题: 数据库里的 float momey 类型,都会精确到多位小数.但有时 ...

  2. VS2013程序打包报 ISEXP : error -****: An error occurred streaming

    原因缺少打包文件 解决方案: 找到打包文件 右击选择 downLoad selected item

  3. 【爬坑系列】之kubernetes环境搭建:二进制安装与镜像安装

    准备: 网上教如何编译与安装kubernetes的教程很多,需要提前准备的也很多,比如关闭selinux,防火墙啦....但有一点一定要注意,编译kubernetes源码时要求有2G内存,这个可是实打 ...

  4. 给Ambari集群里安装可视化分析利器工具Hue步骤(图文详解)

    扩展博客 以下,是我在手动的CDH版本平台下,安装Hue. CDH版本大数据集群下搭建Hue(hadoop-2.6.0-cdh5.5.4.gz + hue-3.9.0-cdh5.5.4.tar.gz) ...

  5. [POJ1741] Tree【树分治 点分治】

    传送门:http://poj.org/problem?id=1741 写的第一道树分治题,撒花纪念~ 对于每一对点对(i, j),它有三种情况: ① 其中一个是根节点.这种情况比较简单,直接加上就好了 ...

  6. CodeForces 923C Perfect Security

    C. Perfect Security time limit per test3.5 seconds memory limit per test512 megabytes inputstandard ...

  7. 题解报告:hdu1995汉诺塔V(递推dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1995 Problem Description 用1,2,...,n表示n个盘子,称为1号盘,2号盘,. ...

  8. UWP Windows10开发获取设备位置(经纬度)

    1.首先要在UWP项目的Package.appxmanifest文件中配置位置权限,如下图所示: 2.Package.appxmanifest后选择第三个选项卡,勾选位置权限(Location) 打开 ...

  9. 输入域名网站访问不了,ping与ftp都正常,这情况有可能域名被墙

    被墙的风险 1.首先域名没有备案,而且服务器是国外的服务器, 2.域名解析到国外服务器 总结:以上两点有很大几率被墙的风险 被墙的解决方案: 1.换新域名并备案(不换新域名走第二步,域名一定要备案) ...

  10. Katalon Studio(二) 进阶战の Jenkins集成 analytics.katalon 集成

    本教程只针对Katalon Studio 与CI工具之一Jenkins的集成与脚本集的测试报告可视化简单操作. 1.新建一个job 2.新建一个自由风格的job 3.构建触发器 4.构建Windows ...