state：數(shù)據(jù)中心，提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到 store 的 state 中進行存儲

Mutation：只有 mutations 中定義的函數(shù)，才有權(quán)利修改 state 中的數(shù)據(jù)

Action：用于處理異步任務(wù)

Getter：對Store中的數(shù)據(jù)進行加工處理形成新的數(shù)據(jù)

store.js示例代碼：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 創(chuàng)建store數(shù)據(jù)源，提供唯一公共數(shù)據(jù)
export default new Vuex.Store({
  state:{
    name: 'vivo',
    count: 0,
    number: 0
  },
  // 只有 mutations 中定義的函數(shù)，才有權(quán)利修改 state 中的數(shù)據(jù)
  mutations: {
    add(state) {
      state.count++
    },
    // 觸發(fā) mutations 時傳遞參數(shù)
    addN(state, step) {
      state.count += step
    },
    reduce(state) {
      state.number--
    },
    reduceN(state, step) {
      state.number -= step
    }
  },
   // Action：用于處理異步任務(wù)
  actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('add')
      }, 2000)
    },
    // 帶參數(shù)
    addAsyncN(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 2000)
    },
    reduceAsync(context) {
      setTimeout(() => {
        context.commit('reduce')
      }, 2000)
    },
    // action: 帶參數(shù)
    reduceAsyncN(context, step) {
      setTimeout(() => {
        context.commit('reduceN', step)
      }, 2000)
    }
  },
  // Getter:對Store中的數(shù)據(jù)進行加工處理形成新的數(shù)據(jù)
  getters: {
    showCount(state) {
      return '當前最新數(shù)據(jù)為：' + state.count
    },
    showNum(state) {
      return '當前最新數(shù)據(jù)為：' + state.number
    }
  }
})

組件訪問 state 中數(shù)據(jù)方式一：this.$store.state.方法名

getter數(shù)據(jù)進行加工處理形成新的數(shù)據(jù)方式一:$store.getters.方法名

Home.vue組件代碼

<template>
  <div>
    <!-- this可以省略 -->
    <!-- 組件訪問state數(shù)據(jù)的第一種方式 -->
    <h1>{{this.$store.state.name}}</h1>
    <!-- getter數(shù)據(jù)進行加工處理形成新的數(shù)據(jù)方式一 -->
    <h2>{{$store.getters.showCount}}</h2>
    <button @click="addNum">+1</button>
    <button @click="addParam">+N</button>
    <button @click="btnAddAsync">+1 Async</button>
    <button @click="addAsyncN">+N Async</button>
    <p>---------------------------------------</p>
    <h1>減少：{{number}}</h1>
    <h1>減少：{{showNum}}</h1>
    <button @click="reduce">-1</button>
    <button @click="reduceN(3)">-N</button>
    <!-- <button @click="reduceParam">-N</button> -->
    <button @click="reduceAsync">-1 Async</button>
    <button @click="reduceAsyncN(5)">-N Async</button>
  </div>
</template>

// 組件訪問state數(shù)據(jù)方式二：...mapState([‘方法名’])

// 使用getters的方式二：...mapGetters([‘方法名’])

// 觸發(fā) mutations 方式一：this.$store.commit('方法名')

// 觸發(fā) mutations 方式二：...mapMutations(['方法名', '方法名'])

// 觸發(fā) action 方式一：this.$store.dispatch('方法名')

// 觸發(fā)action 方式二：...mapActions(['方法名', '方法名'])

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
computed: {
    // 組件訪問state數(shù)據(jù)第二種方式
    ...mapState(['number']),
    // 使用getters的方式二：...mapGetters([‘方法名’])
    ...mapGetters(['showNum'])
  },
methods: {
   addNum() {
      // 觸發(fā) mutations 的第一種方式
      this.$store.commit('add')
    },
   // 帶參數(shù)
   addParam() {
      this.$store.commit('addN', 2)
    },
   // 觸發(fā) mutations 的第二種方式
   ...mapMutations(['reduce', 'reduceN']),
   // 當方法不同名時要調(diào)用函數(shù)
    // reduceParam() {
    //  this.reduceN(3)
    // },
    // 觸發(fā) action 方式一
    btnAddAsync() {
      this.$store.dispatch('addAsync')
    },
    addAsyncN() {
      this.$store.dispatch('addAsyncN', 2)
    },
    // 觸發(fā)action 方式二
    ...mapActions(['reduceAsync', 'reduceAsyncN'])
  }
}