首先我們要知道什麼是vuex,請看官方的解釋: “Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension,提供了諸如零 ...
首先我們要知道什麼是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 = this.$store.state.想要使用的變數的名稱
以上就是vuex中最簡單的應用。剩下的還有就是actions是用來非同步提交的,然後module是用來模塊劃分的。剩下的內容,算是進階應用,等到有時間了,自己在總結一下