Vuex知识点全解析(3)---actions有什么用？

我们已经复习过了state,mutations,getters的相关作用和用法，今天来搞一下actions

actions其实也很简单，我们都知道在想要修改state中的数据，必须要通过mutations，但是mutations是同步的，只能执行同步代码，这显然不能满足所有需求，而actions就是异步的提交mutations，它的作用也是用来修改state的，但是不是直接修改，因为修改state中数据的方法有且只有通过mutations。

mutations和actions都是用来修改state的，只是前者是同步修改，后者是异步修改。

在JavaScript程序中最直接、最常见的异步操作就是Ajax。

我们先npm install axios --save安装一下axios。

Ajax的作用是请求后端的数据，那么我们首先要创建一个后端服务，我这里使用nodejs。

const http = require('http');

http.createServer((req, res) => {
    
    
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.end(JSON.stringify([
        'data1',
        'data2',
        'data3'
    ]))
}).listen('9999',() => {
    
    
    console.log('server running!!!');
})

在store/index.js中，我们要先 import axios from 'axios'引入一下axios。

然后在actions属性下写入以下内容：

  actions: {
    
    
    getData (ctx) {
    
    
      axios.get('http://localhost:9999').then((res) => {
    
    
        console.log(res);
      })
    }
  }

我们先不修改state的值，只是简单输出一下获取到的后端数据。

actions的内容编写好之后，我们如何调用它呢？

我们再新建一个Part2组件

<template>
    <div>
    
    </div>
</template>

<script>
    export default {
      
      
        name: 'MyPart2',
        mounted() {
      
      
            this.$store.dispatch('getData');
        }
    }
</script>

调用actions的方式之一就是this.$store.dispatch('方法名')。

经过实际测试，我们可以正常获取到后端的值。

那么接下来的要做的就是通过actions提交mutations来修改state中的数据。

方式也很简单，我们在写actions中的方法时，会获得一个默认参数，就是当前的环境上下文ctx，里面就有commit方法。

  actions: {
    
    
    getData (ctx) {
    
    
      axios.get('http://localhost:9999').then((res) => {
    
    
        console.log(res);
        ctx.commit('setData', res.data);
      })
    }
  }

  state: {
    
    
    curIdx: 0,
    name: 'Ray',
    age: '21',
    data: []
  },
  mutations: {
    
    
    setCurIdx (state, index) {
    
    
      state.curIdx = index;
    },
    setData (state, data) {
    
    
      state.data = data
    }
  },

完成了这一系列操作之后，我们可以直接获取一下state中的data，看看是否正确。

<template>
    <div>
        Data: {
   
   {data}}
    </div>
</template>

<script>
import {
      
       mapState } from 'vuex';
    export default {
      
      
        name: 'MyPart2',
        mounted() {
      
      
            this.$store.dispatch('getData');
        },
        computed: {
      
      
            ...mapState(['data'])
        }
    }
</script>

我们完成了一系列的操作，通过actions执行异步操作，提交mutations修改state数据，然后在视图中进行展示。

QQ:505417246
微信:18331092918
微信公众号:Code程序人生
个人博客:http://rayblog.ltd