10分鍾，快速使用VUE-VUEX

原文地址：https://my.oschina.net/gujieyi/blog/768670

 

vuex 主要服務於中大型的單頁應用（比較小的就沒必要了），是一個類似於  Flux  的一個數據管理框架，讓我們的應用內的的狀態保持在可維護、可理解的狀態;

開始主題：

    一 安裝：

     直接下載：https://unpkg.com/vuex  （不推薦）

    npm: npm install vuex

    注意：由於vuex其內部用了很多ES6的語法，建議使用wabpack等工具自動轉ES5，搭建項目。
    考慮到很多同學多ES6還是不是很熟悉，本教程基本都是用ES5來說明
    

    二 認識store

store是整個應用的狀態的中心，但是區別於其他全部對象的是：1、store是響應式，就是會隨着專題改變，而實時改變，而vue組件讀取其中的狀態也就可以被實時更新。2、store的狀態並不能直接改變，必須通過提交更改（一個特定的函數），而改變。這也是保證了數據單項流動；
    例子：

var store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment:function (state) { //改變store狀態的方法
      state.count++
    }
  }
})

store.commit('increment') //通過commit調用改變狀態的increment方法
console.log(store.state.count) //1

 

     三 state、getters、Mutations、actions簡介

state: 類似是vue中的date,用戶儲存數據；
getters: 類似vue中的computed，計算屬性；
mutations: 類似於vue中的methods，邏輯方法。注意：這里面的方法必須是同步的，因為這里的方法將直接修改state的狀態，從而改變store的狀態，如果是異步的話將無法控制state狀態改變的先后順序，使得整個store狀態變的不可控。還有一點是 vue-devtools 這個工具是根據這個來記錄改變的狀態；
actions:實際分發 mutations 里面的方法。
 

整個邏輯可以看一下官方的一個經典圖：

通過這張圖我們可以看到這幾點：

 

    1.數據是單項，
    2.actions是通過組件來調用的
    3.devtools記錄mutaions的狀態
    4.store的狀態只有被muations改變
    5.當store的狀態被改變，組件也會變實時刷新

 

    四 實戰案例 （購物車）

    首先是搭建項目：

    我用的是vue的腳手架工具 vue-cli (npm安裝：npm install --global vue-cli )
    npm：vue init webpack vuex-demo
    npm: npm install 
    npm: npm install vuex --save
    最后經過修改的項目結構
    

主要增加store文件夾。

項目結構目錄解釋：
    api：獲取服務器的獲取數據方法
    store 下面的 index.js: store的根目錄，保存項目所以狀態（對模塊和模塊之間公共狀態 組件）
    store 下面的 modules: vuex由於狀態都是基於stroe，但是順着項目內容的增加，stroe就會變的非常臃腫，所以vuex允許我們把store分成幾個modules,每個modules都是自己的state、getter、mutation、actions。
    store 下面的 getter.js 和 actions.js ：這兩個主要是管理模塊之間狀態 

 

注意：這我就詳細講一下：對於產品獲取、展示的這個一個過程

 首先獲取產品：

首先要在product中保存產品，就需要在product中創建：

 var state = {
    all:[] //獲取的商品
}

 

要改變state中的狀態，只有通過mutations：

 var mutations = {

    receive_product:function(state,products){
        
        state.all = products;
    },
}

 

 而調用muations中的方法，需要actions:

//調用獲取產品的
import api_product from '../api/products.js' 

//調用獲取商品列表方法的action
var getAllProducts = function(context){
    var commit = context.commit;
    api_product.getProducts(function(products){
        //console.info(products)
        commit("receive_product",products)
    })
} 

 

而這里獲取產品就需要通過API來，這個我模擬獲取數據

/**
 * 模擬服務器獲取數據
 */

var _products = [
  {"id": 1, "title": "iPad 4 Mini", "price": 500.01, "inventory": 2},
  {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10},
  {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99, "inventory": 5}
]

export default {
    //模擬獲取
    getProducts:function(callback){
        setTimeout(callback(_products), 300)
    },

}

 

最后通過在vux組件(product)中調用actions:

created () {
    this.$store.dispatch('getAllProducts')

  }

 

 展現刷新產品：

從store中獲產品，由於動態所以必須在computed獲取：

computed: mapGetters({
    products: 'allProducts',
  }),

 

這里要解釋：mapGetters，是vuex為我們提供的一個工具函數，方便我們調用getter的方法
 

由於這個商品，會和購物車模塊有聯系所以我們單獨寫在 getter.js 中的方法：

//商品列表
var allProducts = function(state){
    return state.products.all;
}

 

通過獲取protuct模塊下的state中的all,這樣我們就動態的創建產品

最后通過圖片我們在回顧一下整個過程


完整案例下載地址：https://github.com/gu091120/vuex-demo.git