什么是vuex

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

个人理解就是集中管理项目开发中用到的数据，要问什么时候用到vuex。当你构建一个中大型单页面网站的时候可以用到，如果是较为简单的页面反倒最好不要用，会显得繁琐冗余。一个简单的store模式就足够了。

vuex的四大核心元素是state、mutations、actions、getter。

State

state的作用就是存放组件之间的共享数据，也就是说组件之间共享的状态主要存放在state属性中。

state提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({state:{0}
})

组件访问state中数据的第一种方式：

this.$store.state.全局数据名称

组件访问state中数据的第二种方式：

//1.从vuex中按需导入mapState函数
import {mapState} from 'vuex'

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：

//2.将全局数据映射为当前组件的计算属性
computed:{...mapState(['count'])
}

Mutation

不允许直接修改store中的全局数据，而mutation是唯一修改store状态的方法。

1.只能通过Mutation变更Store数据，不可以直接操作Store中的数据。

2.通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

//定义Mutation
const store = new Vuex.Store({state:{count:0},mutations:{add(state){//变更状态state.count++  //state中的数据自加1}}
})

//1.触发mutation
methods:{handle1(){//触发mutation的第一种方式this.$store.commit('add')}
}

mutation可以传递参数，上面代码是让count加1，传递参数之后可以加n

//定义Mutation
const store = new Vuex.Store({state:{count:0},mutations:{addN(state,step){//变更状态state.count += step  //state中的数据自加step}}
})

//1.触发mutation
methods:{handle1(){//触发mutation的第一种方式this.$store.commit('addN',3)  //这里就是使count加3}
}

触发mutations的第二种方式：

//1.从vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法

methods:{...mapMutations(['add','addN'])
}

action

进行异步操作时选择用action，action提交的是mutation，而不是直接变更状态。

//定义Action
const store = new Vuex.store({//省略其它代码mutations:{addN(state,step){state.count+=step}},actions:{addNAsync(context,step){setTimeout(()=>{context.commit('addN',step)},1000)}}
})

//触发action
methods:{handle(){//调用dispatch函数this.$store.dispatch('addNAsync',5)}
}

触发actions的第二种方式：

//1.从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'methods:{...mapActions(['addAsync','addNsync'])
}

Getter

Getter主要用于对Store中的数据进行加工处理形成新的数据。

Store中的数据发生变化，Getter的数据也会跟着变化。

//定义Getter
const store = new Vuex.Store({state:{count:0},getters:{showNum:state=>{return '当前数为'+state.count}}
})

vuex四大核心元素相关推荐

playbook核心元素之 -- 角色role(9)
playbook核心元素之 --> 角色role 角色: 以特定的层级目录结构进行组织的tasks.variables.handlers.templates.files等: role_name/ ...
playbook核心元素之模板template 介绍(7)
playbook核心元素之 --> 模板template 介绍 templates:文件文件,内部嵌套有模板语言脚本(使用模板语言编写) [root@ansible ~]# ansible-do ...
细数网站成功赢利须具备的四大核心要素
2019独角兽企业重金招聘Python工程师标准>>> 面对互联网创业的成功者,草根站长依旧在独自奋力的打拼,为了互联网创业的梦想而努力,希望自己的网站最终能够成为一个为自己顺利赢利 ...
Ansible Playbook核心元素以及组件
Playbook核心元素 Hosts 执行的远程主机列表 Tasks 任务集 Variables 内置变量或自定义变量在playbook中调用 Templates 模板,可替换模板文件中的变量并实现一 ...
[RabbitMQ]RabbitMQ概念_四大核心概念
RabbitMQ RabbitMQ 的概念 RabbitMQ 是一个消息中间件:它接受并转发消息.你可以把它当做一个快递站点,当你要发送一个包裹时,你把你的包裹放到快递站,快递员最终会把你的快递送到收 ...
ReactiveCocoa核心元素与信号流
ReactiveCocoa(以下简称"RAC")是一个函数响应式编程框架,它能让我们脱离Cocoa API的束缚,给我们提供另外一套编码的思路与可能性,它能在宏观层面上提升代码易读 ...
MyBatis四大核心概念
本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder.SqlSessionFactory.SqlSession.Mapper). MyBatis 作为互联网数据库映 ...
华为云新加坡峰会发布CloudAI创新实验室，四大核心优势助力智能化升级
[新加坡,4月24日]4月24日-25日, 2019华为云新加坡峰会在新加坡召开,来自新加坡及亚太区域的近2000名客户.伙伴.产业界学术界人士.开发者,就云计算.人工智能(AI).大数据等方面的创新 ...
SpringBoot四大核心之自动装配——源码解析
四大核心 1.自动装配:简单配置甚至零配置即可运行项目 2.Actuator:springboot程序监控器 3.starter:jar包的引入,解决jar版本冲突问题 4.CLI:命令行初学体验 ...

vuex四大核心元素