在vue-cli項目里使用vuex,vuex的詳細使用

本文轉載自查看原文 2019-05-16 17:05 458 VUE

之前寫過很多vue項目，項目中使用過vuex，那個時候看vuex愣是雲里霧里，都是照葫蘆畫瓢使用，沒有清楚弄明白，

今天再看一下文檔，感覺茅塞頓開，特別寫下來，給需要的人借鑒

一，什么是vuex

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

官方文檔是這么說的，反正我是沒看明白

以自己的話說vuex是一個把多個組件通用的數據我們把它拿出來，放到一個叫store里面管理，在需要使用的組件里，我們可以拿出來使用

簡單來說就是data的共享屬性

二，關於store

“store”基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。

暫時先把state當成我們通用data來看吧，這樣就好理解咯~

三，關於State

state就是我們項目全局通用的data屬性，並且這些屬性是響應式的，也就是說當屬性發生改變時，state是會動態響應的

四，關於Getter

Getter可以使我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數等

Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，

getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。

五，關於Mutation

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字符串的事件類型 (type) 和一個回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個參數

五，關於Action

Action 類似於 mutation，不同在於（划重點哦，很多面試官會問噠~）：

1，提交的是 mutation，而不是直接變更狀態。

2，可以包含任意異步操作。

六，關於Module

由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割

七，如何使用

我們講了那么多理論知識，那實際情況我們如何使用呢，一起來看吧：

首先是安裝

（1）npm install vuex --save

（2）新建倉庫

在src目錄下新建一個文件夾，我們命名為store好了，然后在該文件夾下面創建一個js文件，我們還是叫他store好啦,截圖看起來更方便哦