Vuex簡單入門

時間 2019-12-04

標籤 vuex 簡單入門简体版

原文原文鏈接

Vuex是vue全家桶中最適合大型應用的代碼庫，能夠保存網頁應用的歷史狀態，提供網頁回溯功能，管理各個組件的狀態和關係。html

但對於小型應用來講過於繁重，一個bus-中央總線就能夠知足您的需求。vue

前言

vuex是vue全家桶中最難的一個，並且會感受比較繞，在學習以前，建議您先學習：
vue
vue-router
nodenode

簡介

在作例子以前，咱們須要來了解一下Vuex的思想，避免盲人摸象，若是以爲枯燥的話也能夠先看後面的案例，可能會更容易理解。程序員

單向數據流

Vuex內容比較複雜，你們不妨類比組件來看一看，左邊是官網單向數據流表，右邊是vue組件系統：
vue-router

Action : 相似於methods方法，用來改變State中的數據（等會會提到mutations）
    State ： 相似於組件中data，用來保存數據（能夠提供快照，回溯功能）
    View ： 這個是Vuex外的內容，經過action來實現功能，也從state中獲取數據

這就是所謂的單向數據流vuex

Vuex的運行機制

Vuex運行機制以下圖，在下剪去了一些複雜的內容

簡單解釋一下圖中幾個英文單詞的意思：
四個元件：
Vue Components ：組件，你們應該已經寫過不少了
Actions ：方法（異步），負責調用mutation裏面的方法
Mutations ：方法（裏面只能放同步），裏面定義了各類方法，用來修改State的內容
State ：說白了就是一個對象，裏面用對象儲存內容，和data類似
四個動做：
Dispatch：派遣，相似於子組件的$emit
Commit ：觸發，使用Vuex實例的commit方法，觸發Mutation裏面的方法
Mutate ：變動，使用Mutations裏面的方法來改變State內容
Render ：實際上屬於components組件調用State裏面的內容來進行頁面渲染vue-cli

想必你們看完這些已經有點暈了吧，暈就對了，接下來咱們來作點簡單的實例。npm

示例

思惟導圖

作以前，咱們先看下示例是如何運行的吧：

vm組件綁定了一個計算屬性，從state裏面拿值
vm組件偵測到點擊事件，告訴store實例：讓Action幫我改數據
Action收到領導的命令，告訴下屬程序員mutations：給我改數據
Mutations就很聽話的改變了State的數據
State做爲總受固然很服帖的改變了數據
固然，State裏面的數據逃不過vm的眼睛，vm計算屬性檢測到了數據變化，從而改變了值segmentfault

示例的初始化

咱們新建一個文件夾，新建一個html文件，引入基本的代碼：app

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/vuex"></script>
</head>
<body>
  <div id="app">

  </div>
  <script>
    const store = new Vuex.Store({
      state : {

      },
      actions : {

      },
      mutations : {

      }
    })

    let vm = new Vue({
      el : "#app",
      data : {

      },
      computed : {
      
      },
      methods : {

      }
    })
  </script>
</body>
</html>

以上初始化了咱們的項目，其中初始化了
store實例，包括三巨頭：state,actions,mutations
vm實例，vue的一個組件而已

好，接下來咱們來作一個點擊增長數字的網頁

html數據渲染

修改如圖紅框中間的數據，這裏咱們綁定了

count : 計算屬性
counter : 函數，綁定在methods中

好的，接下來修改vm中內容：

解釋下參數：

count : 計算屬性，返回store裏面的值
counter : 函數，使用store的dispatch方法，觸發incrementAction 的Action方法

store中數據綁定

解釋下幾個參數：

count : 數字的計數，和data中數據很像
incrementAction ： 觸發mutations中的increment方法
increment ： 增長數字的值，和methods中函數很像

好的，接下來刷新網頁，點擊按鈕，是否是數字增長了呢了呢？這就是最簡單的一個實例。

getter實例--更新中

在vue-cli中使用--更新中

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。