〖Vue〗小知识- Vuex 异步更改数据: actions

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文我们学习 Vue-Router路由的使用 , 本文就开始学习 Vuex 的相关内容了. 相对大一点的项目会比较复杂, 在各个页面间的数据传递就会比较麻烦, 这时候就会用到 Vuex全局状态管理工具了.

Vuex 是什么

Vuex 官方文档: vuex.vuejs.org/zh/

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

Vuex 异步更改数据: actions

存的是异步改数据的方法 dispatch

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，

因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

Vuex 同步改数据

mutations 存的是同步改数据的方法 commit

show me codes 上代码:

异步/同步 的加减代码展示:

读取数据: this.$store.state.变量

<template>
  <div id="app">
    {{ num }} {{ $store.getters.isGood }}
    <button @click="inc(2)">同步加法</button>
    <button @click="inc(-1)">同步减法</button>
    <button @click="asyncinc(3)">异步加法</button>
  </div>
</template>

<script>
  export default {
    name: 'App',
    computed: {
      // computed 计算属性, 是在 HTML DOM 加载后马上执行的!
      num() {
        return this.$store.state.num
      },
    },
    methods: {
      inc(p) {
        this.$store.commit('changeNum', p)
      },
      asyncinc(p) {
        this.$store.dispatch('asyncChangeNum', p)
      },
    },
  }
</script>

// src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({
  state: {
    num: 10001,
  },
  getters: {
    // getters 相当于计算属性
    isGood(state) {
      return state.num >= 60 ? '及格了呀' : 'ε=(´ο｀*)))唉 不及格 再接再厉!'
    },
  },
  mutations: {
    changeNum(state, p) {
      // 同步更改数据
      state.num += p
    },
  },
  actions: {
    // 异步更改数据
    asyncChangeNum(context, p) {
      setTimeout(() => {
        context.commit('changeNum', p)
      }, 1500)
    },
  },
})
console.log(store.state) // { num: 10001 }
export default store

参考 官方文档

• Vuex 官方文档: vuex.vuejs.org/zh/