2019獨角獸企業重金招聘Python工程師標準>>>

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

看完了記得點個贊，或者來留言噴噴我哈！

轉載于:https://my.oschina.net/gujieyi/blog/768670

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的10分钟，快速使用VUE-VUEX的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。