vue 中vuex的最簡單使用-有解無憂

　　首先我們要知道什么是vuex，請看官方的解釋：

“Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式，它采用集中式存盤管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化，Vuex 也集成到 Vue 的官方除錯工具 devtools extension，提供了諸如零配置的 time-travel 除錯、狀態快斬訓入匯出等高級除錯功能，”

　　是不是看完了也是一頭霧水，那就對了，因為官方的解釋，都是在用一個概念解釋另一個概念，所以，看完了解釋，初學者不明白很正常，姑且把這段話放在這里，不用著急理解他，只要知道有這么回事就行，

　　我自己理解的vuex，就是vue給提供的一個官方的，回應式的，全域的，按照自己的規則呼叫的，相當于html5中的storage的一樣的插件，

　　官方：這個就不用解釋了，

　　全域的：這個就和storage一樣了，你只要在main.js全域注冊了，那么任何一個組件，咱們都可以直接呼叫，

　　回應式的：這個就是說，只要我們在任意組件改變這個里面的變數，而后，vue會回應式的把所有的組件中用到這個變數的組件更新；

　　按照自己的規則呼叫：這個就是說，這個組件，既然是回應式的，那么我們想要更改一個變數，需要按照官方給定的方式來更改；

廢話不多說，直接看代碼：

 1 //store中的index.js檔案
 2 import Vue from 'vue'
 3 import Vuex from 'vuex'
 4 
 5 Vue.use(Vuex);
 6 
 7 const store = new Vuex.Store({
 8     state:{
 9       //用來定義變數的，相當于vue中的data
10       firstname:"哈哈",
11       lastname:"先生"
12     },
13     getters:{
14       //相當于computed
15       fullname(state){ //這里會有一個默認的引數，就是state物件
16         return state.firstname + state.lastname;
17       }
18     },
19     mutations:{
20       // 這個比較特殊，這個里面的方法是用來同步提交到state中的，也就是說，當一個組件想要改變state中的值的話，
21       // 必須通過mutations里面的方法才可以！
22       changename(state,newName){ //這里會有兩個引數，一個同樣是state物件，另一個是傳過來的引數
23         state.firstname = newName;
24       }
25     }
26 })
27 export default store

　　然后我們在一個組件中想要呼叫mutations中的方法，需要下面的方式：

1 　　changename_fun(){ //vue中methods的方法
2       this.$store.commit("changename","這里是我們傳遞的引數") // 這種傳參的方式叫做提交載荷（Payload）
3     },

這樣的話，我們就能更新vuex中的state變數了，

　　如果只是想使用vuex中的變數的話，我們直接在想要用的地方，使用下面的代碼就可以了

1 let value = https://www.cnblogs.com/daniao11417/p/this.$store.state.想要使用的變數的名稱

以上就是vuex中最簡單的應用，剩下的還有就是actions是用來異步提交的，然后module是用來模塊劃分的，剩下的內容，算是進階應用，等到有時間了，自己在總結一下

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/69769.html

標籤：JavaScript

上一篇：前端新人關注的Web前端飽和性分析？前端面試必知必會的十點！

下一篇：實作微前端需要了解的 Vue Genesis 渲染器