手摸手教你在vue-cli裡面使用vuex，以及vuex簡介

OBKoro1發表於2019-03-04
Vue

寫在前面：

這篇文章是在vue-cli裡面使用vuex的一個極簡demo，附帶一些vuex的簡單介紹。有需要的朋友可以做一下參考，喜歡的可以點波贊，或者關注一下，希望可以幫到大家。

本文首發於我的個人blog：obkoro1.com

引入步驟

我建立了一個新的vue-cli裡面什麼東西都沒有，只引用了vuex，這裡是碼雲地址,可以下載下來，然後npm install、npm run dev試試看，裡面vuex的使用地方也全都註釋了一遍。

安裝

    npm install vuex --save
複製程式碼

在src目錄下建立資料夾vuex

資料夾包含檔案

該資料夾包含以上檔案，建立好了之後，我們一個一個檔案來說裡面都有什麼東西。

vuex/index.js

import Vue from `vue`;
import Vuex from `vuex`;
import status from `./modules/status/index`;//引進模組
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {  
    //Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action
    dataStatus:status,//訪問這裡面資料的時候要使用`dataStatus`
  },
});
複製程式碼

這是vuex的主檔案store，這個例子是把state、mutation、action分割成模組，然後再將每個模組引用進這個index.js檔案裡面，等我們整個資料夾的檔案都搭好之後，還要把檔案引入到main.js裡面、

vuex/modules/status/index.js

import actions from `./actions`;
import mutations from `./mutations`;
//引入action和mutations 

export default {  
  state:{ //這裡面是要讀取或者寫入資料的地方
      msg:`預設狀態`,
  },
  //state actions mutations順序不能亂
  actions: actions,
  mutations: mutations,
}
複製程式碼

這是一個模組裡面的主檔案，模組內部擁有自己的state、actions、mutions，是從上到下進行分割的。

vuex/modules/status/mutation_type.js

//這個js檔案裡面只是一些變數，把action和mutation檔案裡面相同變數名的連結起來
export const VUEX_TEST = `VUEX_TEST`;
// 一般使用的是大寫來命名變數，因為尤大也是這麼做 2333
複製程式碼

vuex/modules/status/actions.js

import * as types from `./mutation_type`; //引入變數
export default {
  actionFn({commit},data){ //actionFn是在元件通過dispatch觸發的函式名 可以理解成元件和actions的連線
    commit(types.VUEX_TEST,data);
    //types.VUEX_TEST 是要commit到mutation的哪個位置 變數的作用
    //data 是傳過來的引數
  }
};
複製程式碼

vuex/modules/status/mutations.js

import * as types from `./mutation_type`;//引入變數

export default {
  //types.VUEX_TEST 代表接受哪個actions的commit 也就是上面引入變數的作用
  [types.VUEX_TEST](state,data){ 
    //第一個引數state是這個模組的state 第二個引數是傳進來的資料 
    if(data.status==1){ //根據傳進來的引數做各種操作
      //這裡就是操作state了，賦值之後，各個元件上面引用該資料的地方會自動更新      
      state.msg=data.text;
    }else if(data.status==2){
        state.msg=`奕迅`;
    }
    //這裡是隨便寫的一個栗子
    console.log(state.mg,data,`mutation`); 
  }
};
複製程式碼

這兩個檔案裡面有註釋，解釋的蠻清楚的。當把所有檔案建立好了之後，再回過頭來看看每個檔案之間都有聯絡,多想想或許就懂點什麼東西了 emmm

vuex資料夾，檔案目錄以及下載

引入main.js

手摸手教你在vue-cli裡面使用vuex，以及vuex簡介

上面的vuex資料夾只是搭建一個store，但是這樣還不夠，我們還要在專案裡面使用這個。引用到main.js，如圖所示。

元件中如何使用。

手摸手教你在vue-cli裡面使用vuex，以及vuex簡介

使用的話就是像上面那麼使用，本文只是一個簡單的示例，還有更多騷操作，等大家上手之後再慢慢摸索咯。

git地址

感覺寫的蠻亂的，大家如果看不太懂的話，可以到碼雲去下載檔案，然後自己跑一跑，多看看，試一試就應該沒問題了。

vuex簡介

通常我是希望大家先學會用，然後再瞭解後面的機制，每次我看博文的時候，一大段原理貼上來，都給我弄懵逼了。。

vuex主要是用來複雜專案之間的元件通訊功能，簡單的專案不要用這套複雜的事件以及狀態管理機制。專案如果不夠複雜的話推薦我之前寫的：在vue專案中 如何定義全域性變數 全域性函式，使用全域性變數的形式的也可以實現需求。

vuex實現的作用：資料共享機制

通過統一的資料中心store維護狀態資料，每個元件進行更新的時候，通知資料中心store。再由stroe將共享的狀態，觸發每一個呼叫它的元件的更新。

store觸發元件更新

vuex的工作流程

大家先仔細看看下面這張圖，理解他的工作機制。

手摸手教你在vue-cli裡面使用vuex，以及vuex簡介
  1. 在vue元件裡面，通過dispatch來觸發actions提交修改資料的操作。
  2. 然後再通過actions的commit來觸發mutations來修改資料。
  3. mutations接收到commit的請求，就會自動通過Mutate來修改state（資料中心裡面的資料狀態）裡面的資料。
  4. 最後由store觸發每一個呼叫它的元件的更新

注意：這套模型是單向流動的

後話

以上就是本文的所有內容了，希望可以幫到大家。

最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。
個人blog and 掘金個人主頁

以上2017.12.9

相關文章