vuex----mutation和action的基本使用
我们要实现的很简单,就是点击+1的count加一,点击-1的时候count-1
一、mutation
在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,commit mutation 之后, 要做什么事情,那就需要给它指定一个处理函数, 类型(名字) + 处理函数就构成了mutation. 现在test.js添加mutation.
- const store = new Vuex.Store({
- state: {
- count:0
- },
- mutations: {
- // 加1
- increment(state) {
- state.count++;
- },
- // 减1
- decrement(state) {
- state.count--
- }
- }
- })
Vue 建议我们mutation 类型用大写常量表示,修改一下,把mutation 类型改为大写
- mutations: {
- // 加1
- INCREMENT(state) {
- state.count++;
- },
- // 减1
- DECREMENT(state) {
- state.count--
- }
- }
二、action
action去commit mutations, 所以还要定义action. test.js 里面添加actions.
- const store = new Vuex.Store({
- state: {
- count:0
- },
- mutations: {
- // 加1
- INCREMENT(state) {
- state.count++;
- },
- // 减1
- DECREMENT(state) {
- state.count--
- }
- },
- actions: {
- increment(context) {
- context.commit("INCREMENT");
- },
- decrement(context) {
- context.commit("DECREMENT");
- }
- }
- })
action 和mutions 的定义方法是类似的,我们要dispatch 一个action, 所以actions 肯定有一个名字,dispatch action 之后它要做事情,就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context, 它是一个store 实例,通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性, context.commit 就会执行commit命令。
其实actions 还可以简写一下, 因为函数的参数是一个对象,函数中用的是对象中一个方法,我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions
- actions: {
- increment({commit}){
- commit("INCREMENT")
- },
- decrement({commit}){
- commit("DECREMENT")
- }
- }
三、dispatch action
现在就剩下dispatch action 了。什么时候dispatch action 呢? 只有当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.
这个时候我们需要新建一个操作组件,我们暂且命名为test.vue
- <template>
- <div>
- <div>
- <button @click="add">+1</button>
- <button @click="decrement">-1</button>
- </div>
- </div>
- </template>
然后,我们在methods里面获取这两个操作事件
- <script>
- export default {
- methods: {
- increment(){
- this.$store.dispatch("increment");
- },
- decrement() {
- this.$store.dispatch("decrement")
- }
- }
- }
- </script>
当然上面这种写法比较麻烦,vuex还给我我们提供了mapActions这个函数,它和mapState 是一样的,把我们的 action 直接映射到store 里面的action中。
- <script>
- export default {
- methods: {
- ...mapActions(['increment', 'decrement'])
- }
- }
- </script>
- <script>
- import {mapActions} from 'vuex'
- export default {
- methods: {
- // 这中写法虽然可行,但是比较麻烦
- // 这时vue 提供了mapAction 函数,
- // 它和mapState 是一样的,把我们的 action 直接映射到store 里面的action中。
- // increment () {
- // this.$store.dispatch('increment')
- // },
- // decrement () {
- // this.$store.dispatch('decrement')
- // }
- // 下面我们使用一种比较简洁的写法
- // ...mapActions(['increment', 'decrement'])
- /**
- 如果事件处理函数名字和action的名字不同,给mapActions
- 提供一个对象,对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。
- */
- // 这里实际是为了改变事件的名字
- ...mapActions(['decrement']),
- ...mapActions({
- add: 'increment'
- })
- }
- }
- </script>
这时候我们单击按钮,就可以看到count 发生变化。
最后附一张简单的图形解析,看起来应该能更直观一点
vuex----mutation和action的基本使用的更多相关文章
- vuex mutation,action理解
1. 在store中分别注册mutation和action,action中用commit同步调用mutation来执行修改state,但是在组件中则使用dispatch异步调用action 2. 通俗 ...
- 前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法
一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...
- Vuex 的使用 State Mutation Getter Action
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); /*1.state在vuex中用于存储数据*/ var state={ cou ...
- vuex中mutation和action的详细区别
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } ...
- 【vuex】mutation和action的区别
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } ...
- 06-vue项目02:vuex、Mutation、Action、ElementUI、axios
1.Vuex 1.为什么使用VueX data从最上面的组件,一层层往下传值,一层层的验证 Vue单向数据流 “中央空调“,代理 VueX 解决数据 传值.. 2.Vuex介绍与安装 (1)Vuex官 ...
- vuex2.0 基本使用(2) --- mutation 和 action
我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...
- 【14】vuex2.0 之 mutation 和 action
我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...
- (转)vuex2.0 基本使用(2) --- mutation 和 action
我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...
- mutation与action
mutation 作用: 更改state的状态 说明: 每个mutation对象都有字符串类型(type)与回调函数,在回调函数内进行状态修改,回调函数的第一个参数为state eg: mutatio ...
随机推荐
- 深入理解JMM(Java内存模型) --(四)volatile
volatile的特性 当我们声明共享变量为volatile后,对这个变量的读/写将会很特别.理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个监视器锁对这 ...
- 计算属性 computed
计算属性 computed 计算缓存 vs Methods <div id="example"> <p>Original message: "{{ ...
- http-2.2
HTTP-2.2 httpd 配置文件的组成: grep "Section" /etc/httpd/conf/httpd.conf ### Section 1: Global En ...
- js滚轮事件需要注意的兼容性问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- golang——database/sql包学习
1.database/sql包 sql包提供了保证SQL或类SQL数据库的泛用接口. 使用sql包时必须注入(至少)一个数据库驱动. (1)获取mysql driver:go get -v githu ...
- working hard to be a professional coder
1:read 2 : code 3 : 勤奋 4:技术栈 就前端主流技术框架的发展而言,过去的几年里发展极快,在填补原有技术框架空白和不足的同时也渐渐趋于成熟.未来前端在已经趋向成熟的技术方向上面将会 ...
- 【原创】利用doxygen来管理项目文档或注释
一.doxygen应用场景: doxygen可以用来管理目前主流的编程语言的注释而形成文档系统.(包括C, C++, C#, Objective-C, IDL, Java, VHDL, PHP, Py ...
- vue 父子组件双向绑定
vue组件有2大特性: 1.全局组件和局部组件 2.父子组件的数据传递 接下来直接用demo直接看如何传值(静态传值) father.vue <template> <div> ...
- ThinkPHP系统流程
1.用户通过入口文件访问控制器2.控制器从模型层中提取数据3.控制器将数据返回模板页面
- tomcat日志详释
1.tomcat的日志分类: 一是运行中的日志,它主要记录运行的一些信息,尤其是一些异常错误日志信息 . 二是访问日志信息,它记录的访问的时间,IP ,访问的资料等相关信息. 2.tomcat的日志目 ...