1. 程式人生 > >從零開始系列之vue全家桶(3)安裝使用vuex

從零開始系列之vue全家桶(3)安裝使用vuex

info 獲取 clas from 顯示 共享 安裝 default 重要

什麽是vuex?

vuex:Vue提供的狀態管理工具,用於同一管理我們項目中各種數據的交互和重用,存儲我們需要用到數據對象。 即data中屬性同時有一個或幾個組件同時使用,就是data中共用的屬性。

中大型單頁應用必備。

小型單頁應用完全可以不用。

安裝:

1.cd 項目 (如cd my-vue)後,輸入

cnpm install vuex --save

2.在src下新建一個名叫store的文件夾,與App.vue同級,並在文件夾下新建store.js文件。因為store.js是基於vue的,所以需要引入vue和vuex。註意大小寫。

import Vue from ‘vue‘
import Vuex from ‘vuex‘

3.使用vue全家桶的任何一個都需要進行use一下,所以vuex也不例外。在引入後面寫上使用。

Vue.use(Vuex)

4.繼續導出默認出口。

export default new Vuex.Store({

state:{..}, mutations:{..},   .. }) 5.在 main.js 中導入 import store from ‘./store/store‘ 在實例化中添加store, 6.開始運用~

應用包含:

(1)State

Vuex 使用 單一狀態樹 —— State,用一個對象就包含了全部的應用層級狀態。就是放頁面共享數據的地方。(私有數據還是放自己.vue文件更好)

(2)Actions  

Action 類似於 mutation,不同在於:

Action 提交的是 mutation,而不是直接變更狀態。

Action 可以包含任意異步操作。

就是說異步方法放入Actions,如ajax請求,求情獲取到數據之後顯示提交mutation裏面的方法來改變state。

(3)Mutations

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。一條重要的原則就是要記住 mutation 必須是同步函數。組件中使用 this.$store.commit(‘xxx‘) 提交,在action裏面使用commit(‘xxx‘) 提交。

(4)Getters

有時候我們需要從 store 中的 state 中派生出一些狀態,Vuex 允許我們在 store 中定義『getters』(可以認為是 store 的計算屬性)。Getters 接受 state 作為其第一個參數:

技術分享圖片

Getters 會暴露為 store.getters 對象供調用。

技術分享圖片

(5)Modules

簡單點說就是為了方便操作和管理,模塊化。

由於使用單一狀態樹,應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時,store 對象就有可能變得相當臃腫。

為了解決以上問題,Vuex 允許我們將 store 分割成模塊(module)。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割。

最後上幾張圖方便查看具體寫法:

  技術分享圖片

 

技術分享圖片

從零開始系列之vue全家桶(3)安裝使用vuex