首頁  >  文章  >  web前端  >  vuex中store的使用介紹(附實例)

vuex中store的使用介紹(附實例)

不言
不言原創
2018-08-23 16:56:174333瀏覽

這篇文章帶給大家的內容是關於vuex中store的使用介紹(附實例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一、狀態管理(vuex)簡介
       vuex是專為vue.js應用程式所開發的狀態管理模式。它採用集中儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式變更。 vuex也整合刀vue的官方調試工具devtools extension,提供了諸如零配置的time-travel調試、狀態快照導入導出等高級調試功能。

二、狀態管理核心
狀態管理有5個核心,分別是state、getter、mutation、action、以及module。分別簡單的介紹一下它們:
1、state
       state為單一狀態樹,在state中需要定義我們所需要管理的陣列、物件、字串等等,只有在這裡定義了,在vue.js的元件中才能取得你定義的這個物件的狀態。
2、getter
getter有點類似vue.js的計算屬性,當我們需要從store的state中衍生出一些狀態,那麼我們就需要使用getter,getter會接收state作為第一個參數,而getter的回傳值會根據它的依賴被快取起來,只有getter中的依賴值(state中的某個需要派生狀態的值)發生改變的時候才會被重新計算。
3、mutation
          更改store中state狀態的唯一方法就是提交mutation,就很類似事件。每個mutation都有一個字串類型的事件類型和一個回呼函數,我們需要改變state的值就要在回呼函數中改變。我們要執行這個回呼函數,那麼我們需要執行一個對應的呼叫方法:store.commit。
4、action
       action可以提交mutation,在action中可以執行store.commit,而且action中可以有任何的非同步操作。在頁面中如果我們要嗲用這個action,則需要執行store.dispatch
5、module
       module其實只是解決了state中很複雜臃腫的時候,module可以將store分割成模組,每個模組中擁有自己的state、mutation、action和getter。

三、實例
1.先建立一個store.js,然後引入vuex

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = {   
userInfo: {}
}const mutations = {
    updateUserInfo(state, infos) {
        state.userInfo= infos
    }
}
export default new Vuex.Store({
    state,
    mutations
})

這樣簡單的store.js就已經完成了。
在介面中我們要怎麼使用這個建立的狀態管理呢

一、設定(更新)資料

首先在script下引入store.js
<script>
import store from &#39;store.js的路径&#39;import { 
mapMutations 
} 
from &#39;vuex&#39;methods:{
    ...mapMutations([        
    &#39;updateUserInfo&#39;
    ])
}
</script>

在需要更新資料的地方,將資料更新進去

this.updateUserInfo(data)

二、取得資料

<script>
import store from &#39;store.js的路径&#39;import { 
mapState 
} 
from &#39;vuex&#39;computed: {
   ...mapState({
        userInfo: &#39;userInfo&#39;
   })
},
created() {
    console.log(this.userInfo)
}
</script>

在created  ||  mounted || methods等需要的地方取得資料

註:也可在同一頁面設定&&取得資料

import { mapMutations, mapState } from &#39;vuex&#39;

相關推薦:

#學會簡單的vuex與模組化

############################################### #####Vue.js之vuex(狀態管理)#######

以上是vuex中store的使用介紹(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn