嗯～? 這個vuex是有點不太好理解的，身為一個后端程序猿研究了好幾天的前端的東西，

也是很不容易啊。

?

我們先來簡單的說一下vuex的用處：

一個頁面有很多表單 , 我試圖將表單寫成一個單文件組件 , 但是表單 ( 子組件 ) 里的數據和頁面 ( 父組件 )

按鈕交互的時候 , 它們之間的通訊很麻煩 。

打個比方，當你要寫購物車的時候，你會把子組件中的商品，添加到購物車中，在添加到購物車的過程中，你可以用組件傳值，一級一級的傳，你也可以直接添加到購物車中，但是你又怎么確定，你在添加購物車的過程中沒有別的操作，像這種交互很多的情況下，我們就需要一個全局的靜態區，來把要添加到購物車的商品全部添加到靜態區中，然后統一添加到購物車中。

?

好，我們進入正題。vuex和get請求一樣，都是要在工程創建好之后，在這里一定提一下，使用Vuex時，不能起名為Vuex。

因為我剛開始創建新工程的時候，可是踩了很多坑的～

?在工程下得終端輸入：（每創建新工程，都要下載的）

?npm install vuex --save? ? ? 這條指令，來下載vuex文件的。

下載完畢之后，來到這個文件夾下，找到一個叫vuex的文件（在最下面） ，就說明這個功能已經是你的了～

?

使用vuex：

為了便于日后的維護，我們分開寫更好，我們在src目錄下，新建一個store文件夾，然后在里面新建一個index.js。

這個index.js就是在上面說的靜態區。

?

然后我們在mian.js中配置：

?

?

先大致說一下這個index.js文件，這個文件中，分為state，mutations, actions

state用法：this.$store.state.屬性名? (可讀寫)　　　　　　　　　　　　　　　　? ?—— 給XXX賦值

actions : this.$store.dispath('action方法名' ，參數）　　　　　　　　　　　　　 —— 對外調用，mutations中的值（因為mutations不能對外傳值）　

mutations : 由對應action觸發(context.commit( 'mutations方法名' ) ,參數)? ? ? ? ? ? —— 把自己的值存入actions中

一般mutations和一個actions對應

?

?

?

?

下面就用到了actions，上面也說了因為mutations不能對外，所以就會用到actions來將mutations方法對外

?

轉載于:https://www.cnblogs.com/buwang/p/9936754.html

總結

以上是生活随笔為你收集整理的前段框架——VueX的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。