vuex的功能 和 localstorage 的作用是一樣，把資料在乙個所有頁面都可以訪問的地方。但是vuex的資料具有響應式（類似資料雙向繫結），而 localstorage 的資料是固定的，必須手動設定。
使用場景1【不同頁面中】：公共底部元件，在不同的頁面保持他們的狀態是同步的。如下，點選跳到不同頁面，在不同的頁面中這個元件必須是同步的，vuex天然就是同步的。
（下面的還是簡單的，不用vuex也很容易實現。如果公共元件比較複雜呢。比如，購物車作為多個頁面的 公共元件呢）
說明：這種不同頁面中公共元件，本質上已經是不同的 元件物件了，所以進入頁面，就會重新初始化這個元件的。如果 不用 vuex，就需要先 想辦法獲取這個元件在哪個頁面上，這個元件再顯示相應的狀態
使用場景2【不同元件中】：不同的元件，都可以操作某個元件的狀態（非父子元件）。
比如，購物車業務。在不同的元件中 都可以選擇加入購物車，不同是元件怎麼把資料設定到購物車元件上呢。用vuex就會很方便
但是這個問題，在重新整理頁面後 執行 程式 再次 賦值進去就可以了。只要賦值的程式放在所有頁面都會執行的地方，重新整理頁面後 vuex 重新賦值。【重新整理頁面清空資料，執行執行程式。這就是乙個合理的邏輯】
實踐中發現的問題：首頁獲取的資料放在 vuex 中。當進入新聞列表頁，獲取新聞列表的介面要用到vuex中的資料。點選新聞列表，進入對應的詳情頁（詳情頁是在其他的專案中）。
返回新聞列表頁時，調獲取新聞列表的介面時，vuex的資料沒有了，導致頁面不能正常展示。【原理：單頁面應用，一旦跳出當前的單頁應用，即不同html檔案。瀏覽器會把之前頁面的資料清除】
vuex資料丟失的解決方案【重新整理，跳轉外鏈再返回】：
1、beforeunload 事件，再頁面重新整理和跳轉到外鏈時，都會觸發。
二、vuex 的使用：更直觀） 或 說明更詳細） 或 官網）
1、基本使用方法：
state：儲存狀態（可以理解為變數）可以從計算屬性中返回某個狀態
getters：通常用在資料的二次處理（過濾資料...），可以理解為state的計算屬性
mutations：修改狀態，並且是同步的。
actions：非同步操作。
import vue from 'vue'import vuex from 'vuex'vue.use(vuex)注：不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。const store = new
vuex.store(,
getters:
},mutations:
},actions: , 1000)
}}})
export
default store
三、vuex 的 模組化：便有擴充套件 官網，比較詳細） 或 推薦）
modules： vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter 用法其實和上面是一樣的。
注意：預設情況下，模組內部的 action、mutation 和 getter 是註冊在全域性命名空間的——這樣使得多個模組能夠對同一 mutation 或 action 作出響應。
說明：vuex的資料，每乙個元件檔案都有很多的資料，如果把所有的資料都放在乙個檔案中，就會很不好管理。所以需要把vuex資料拆分出來，乙個vuex檔案管理乙個頁面中資料。
//vuex目錄下的index.js
引入content.js
vue.use(vuex)
export
default
newvuex.store(
})
/*1、獲取content模組中 store 的資料*/export
default
, mutations:
}}
}2、呼叫模組內的 action、mutation 和 getter 方法：預設情況下，模組內部的 action、mutation 和 getter 是註冊在全域性命名空間的。
this.$store.commit('cgusermsg',45) //
和呼叫全域性store中的對應方法一樣
3、命名空間： 預設情況下，模組內部的 action、mutation 和 getter是全域性的，如果需要模組具有更高的封裝度和復用性，可以給我們設定命名空間。
參考：使用模組後不借助輔助函式訪問資料的方法
/*呼叫的時候帶上模組名稱*/export
default
, mutations:
}}
四、使用 vuex 的輔助函式【推薦】： 或 或 或 官網）
import from 'vuex'
computed: ,2、mapmutations：把mutations裡面的方法對映到methods中create ()
methods:3、mapacions：把actions裡面的方法對映到methods中}
4、mapgetters：把getters屬性對映到computed身上
注意：1、this.$store.commit 有兩種寫法：
//2、getters 和 state 一樣都是儲存資料的，但是getter的資料通常是對state 資料的二次處理。就是類似寫法一this.$store.commit('add',)
//寫法二
this
.$store.commit()
計算屬性的功能，store中getters資料的獲取，和state獲取掛載的物件不同。這點和元件中的 計算屬性有點不同：
this.$store.state.count //3、為什麼要把 同步 和 非同步 區分開：看尤雨溪的回答）stete中值的獲取
this.$store.getters.newcount //
getters 中值的獲取
區分 actions 和 mutations 目的是 為了能用 devtools 追蹤狀態變化。（就是為了便於除錯）
體會：vuex的明顯乙個作用就是頁面間資料變動是同步的。比如，乙個頁面中有顯示支付銀行卡的卡號好，還有選擇銀行卡的按鈕。點選選擇銀行卡的按鈕，
要跳到另外的乙個頁面中去選擇。選好後，跳回來(回退)，如果是用vuex的話，之前的頁面顯示的銀行卡號會同步為自己選擇的銀行卡號。
不然的話就需要先存了快取(本地儲存，或公共變數中)，然後在相應的頁面中去取。比較麻煩。
五、vuex
使用 模組 後 借助輔助函式訪問資料的方法 和 有命名空間 的輔助函式用法：官網中有比較明確的說明）
注意：vuex 使用了 模組，不一定使用了命名空間。預設情況下，模組內部的 action、mutation 和 getter 是註冊在全域性命名空間的。要使用命名空間 需要顯示 的配置：
const store = new1、 vuex 模組 ，但是沒有使用命名空間 時，使用輔助函式：vuex.store(
}}})
//2、vuex使用命名空間時，使用輔助函式：看官方文件。頁面中使用 mapstate，沒有命名空間，就不能使用命名空間。可以使用 es 6的語法簡化結構
...mapstate() => classroom.userinfo //
classroom 是 模組名
}),
1、mutations是唯一乙個可以改變vuex狀態的方法集。
computed
狀態管理庫vuex 狀態管理庫vuex
vuex是乙個專為vue.js應用程式開發的管理庫。狀態就是指元件之間共享的資料 vue專案中配置狀態管理庫vuex的流程 2建立狀態管理庫物件store 3對外丟擲store物件 4在mian.js中將store物件與當前專案相關聯 vuex是乙個專為vue.js應用程式開發的管理庫。狀態就是指元...
vuex狀態管理
在 vue.js 的專案中，如果專案結構簡單，父子元件之間的資料傳遞可以使用 props 或者 emit 等方式 但是如果是大型專案，很多時候都需要在子元件之間傳遞資料，使用之前的方式就不太方便。vue 的狀態管理工具 vuex 完美的解決了這個問題。一 安裝並引入 vuex 專案結構 首先使用 n...
vuex 狀態管理
1.乙個const 物件用來管理系統中的變數。在元件中，當乙個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用mapstate輔助函式幫助我們生成計算屬性。當對映的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給mapstate傳乙個...