vuex狀態管理

在 vue.js 的專案中，如果專案結構簡單， 父子元件之間的資料傳遞可以使用  props 或者 $emit 等方式 

但是如果是大型專案，很多時候都需要在子元件之間傳遞資料，使用之前的方式就不太方便。vue 的狀態管理工具 vuex 完美的解決了這個問題。

一、安裝並引入 vuex

專案結構：

首先使用 npm 安裝 vuex

cnpm install vuex -s

/* eslint-disable no-new */

newvue()

二、構建核心倉庫 store.js

vuex 應用的狀態 state 都應當存放在 store.js 裡面，vue 元件可以從 store.js 裡面獲取狀態，可以把 store 通俗的理解為乙個全域性變數的倉庫。

但是和單純的全域性變數又有一些區別，主要體現在當 store 中的狀態發生改變時，相應的 vue 元件也會得到高效更新。

在 src 目錄下建立乙個 vuex 目錄，將 store.js 放到 vuex 目錄下

import vue from 'vue'import vuex from 'vuex'vue.use(vuex)

const store = new
vuex.store(
})export 
default store

雖然在 main.js 中已經引入了 vue 和 vuex，但是這裡還得再引入一次

三、將狀態對映到元件

主要在 computed 中，將 this

.$store.state.author

的值返回給 html 中的 author

頁面渲染之後，就能獲取到 author 的值

四、在元件中修改狀態

然後在 header.vue 中新增乙個輸入框，將輸入框的值傳給 store.js 中的 author

這裡我使用了 element-ui 作為樣式框架

上面將輸入框 input 的值繫結為 inputtxt，然後在後面的按鈕 button 上繫結 click 事件，觸發 setauthor 方法

methods: 

}

五、官方推薦的修改狀態的方式

上面的示例是在 setauthor 直接使用賦值的方式修改狀態 author，但是 vue 官方推薦使用下面的方法：

首先在 store.js 中定義乙個方法 newauthor，其中第乙個引數 state 就是 $store.state，第二個引數 msg 需要另外傳入

然後修改 header.vue 中的 setauthor 方法

這裡使用 $store.commit 提交 newauthor，並將 this.inputtxt 傳給 msg，從而修改 author

這樣顯式地提交(commit) mutations，可以讓我們更好的跟蹤每乙個狀態的變化，所以在大型專案中，更推薦使用第二種方法。

狀態管理庫vuex 狀態管理庫vuex

vuex是乙個專為vue.js應用程式開發的管理庫。狀態就是指元件之間共享的資料 vue專案中配置狀態管理庫vuex的流程 2建立狀態管理庫物件store 3對外丟擲store物件 4在mian.js中將store物件與當前專案相關聯 vuex是乙個專為vue.js應用程式開發的管理庫。狀態就是指元...

vuex 狀態管理

1.乙個const 物件用來管理系統中的變數。在元件中，當乙個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用mapstate輔助函式幫助我們生成計算屬性。當對映的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給mapstate傳乙個...

VUEX 狀態管理

最近在優化專案，發現有很多公用的方法和屬性，所以計畫把這些公用的狀態提取出來，所以選擇vuex，將公用狀態分發給多個元件復用，使得狀態管理更為清晰，方便專案的維護。1 目錄結構的設計 store 目錄名稱 index.js 狀態管理例項的建立 state.js 公共管理的狀態 mutation.js...