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 一般用來解決某些值，在不同的元件中都要用到，如果兩個元件經過路由直達傳參還好，一旦是跨了好幾層路由之間傳參，比如想要登入後的token,登入後的使用者名稱。購物車的數量顯示等，有些還要實時更新。不可能一直傳來傳去。這個時候使用vuex。資料儲存在state中，想要更改必須通過 mutati...

Jawe的初步了解

一 解壓開 jawe 原始碼包二 執行configure.bat 檔案這時會產生乙個 build.properties 檔案。檔案內容大致如下 jdk.dir c jbuilderx jdk1.4 install.dir version.number 1.4 三 再執行 make.bat 就可以編譯...

Docker的初步了解

有些開發者可能還是不明白 docker 對自己到底有多大的用處，因此翻譯 docker 個人用例 這篇文章中來介紹 docker 在普通開發者開發過程中的用例。docker 如今贏得了許多關注，很多人覺得盛名之下其實難副，因為他們仍然搞不清 docker 和普通開發者到底有什麼關係。許多開發者覺得 ...