Vuex 基本使用

Vuex

一、什麼是Vuex?

這裏給一個 Vuex的傳送門 Vuex

官方解釋：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。
通俗解釋：是一種最好的、非父子組件傳值的一種方案

其實所謂的Vuex就是一個公共的內存對象，它把所有組件需要共有的狀態放到了一個公共的內存空間裏.並且給每一個狀態做了一個數據劫持( 給每一個狀態都添加了getter和setter )

二、 Vuex的使用流程

2.1 安裝

npm install vuex --save
or
yarn add vuex -S

2.2 引入插件

import Vuex from 'vuex'

2.3 使用Vuex

Vue.use(Vuex)

2.4 創建公共的內存對象

var store= new Vuex.Store({})

2.5、將vuex導出，並掛載到vue身上

new Vue({
	store
})

以上這些，是自己手動搭建項目使用vuex的步驟。當然，有更簡單的步驟來使用vuex，官方給我們推薦了一個腳手架 @vue/cli，至於這個腳手架的使用方法，咱們也是有一個簡單的教程在的 @vue/cli
當使用這個腳手架進行搭建項目，會自動幫我們配置好很多東西，用到的用不到的都已經配置完成。

三、Vue中常用的配置項

• state ：存儲公共的狀態
• mutation ：更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation
• action ： 可以包含任意異步操作,並且是通過mutations來修改數據
• modules ：公共狀態的私有化
• getters ： 公共狀態的計算屬性 （等價於computed，依賴於state裏的狀態）

四、Vuex的使用

接下來，簡單的用代碼演示一下使用
App.vue

<template>
  <div id="app">
    <One></One> 
  </div>
</template>

<script>
import One from "./components/One"; 
export default {
  components: {
    One
  }
};
</script> 

狀態管理集中在store裏
store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    num: 10
  },
  mutations: {},
  actions: {},
  modules: {}
});

在組件裏如何使用,如下
One.vue

<template>
  <div>
    <h1>
      page one
    </h1>
    <p>
      {{ this.$store.state.num }}
    </p>
  </div>
</template>

效果如圖:

那麼，如何能夠更好的修改state裏的數據呢？

由官網所示的流程圖可知，需要調用Action裏的方法，在調用Mutations裏的方法進行修改state裏的數據。接下來，我們用代碼進行詳細的演示
One.vue

 <button @click="handleChange(1)">click me +1</button>

先添加一個按鈕，來觸發相應時間

methods: {
    handleChange(params) {
      this.$store.dispatch("handleActionChange", params);
    }
  }

這裏纔是組件修改vuex裏數據的操作，通過this.$store.dispatch()來觸發actions裏的方法。dispatch()有兩個參數

1. action裏包含的方法名
2. 需要向action對應方法裏傳遞的參數

接下來就是對於數據修改的具體業務邏輯
store/index.js

mutations: {
    handleMutationsChange(state, params) {
      state.num += params;
    }
  },
  actions: {
    handleActionChange(context, params) {
      context.commit("handleMutationsChange", params);
    }
  }

之前在One.vue組件裏，觸發了actions裏的一個方法並傳遞了一個參數，在actions裏的方法，均默認有同一個參數content,第二個參數就是組件裏傳遞過來的數據，content其內包含的屬性如下：

需要注意的是，actions裏的方法並不可以直接修改state裏的數據，而是需要commit來觸發Mutations裏的方法

而Mutations裏的方法，也否默認含有同一個參數state，第二個參數是從actions方法裏傳遞過來的數據。state裏的屬性如下：

num就是我們定義在state裏的變量.
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation

那麼，我們爲什麼要遵循這麼一個流程，而不是直接在部件內部進行數據點更改呢？？？

1. 是因爲我們想要明確的追蹤到狀態的變化
2. 可以通過vue-devtools來進行時間旅行的狀態監測

總結：不要在組件內部修改store裏的數據，這樣會讓數據的流向難以理解。想要改變store裏的數據，只有通過Mutations這一種方法來修改