首頁 >web前端 >js教程 >vuex中store的使用介紹（附實例）

vuex中store的使用介紹（附實例）

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

這篇文章帶給大家的內容是關於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 &#39;vue&#39;import Vuex from &#39;vuex&#39;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中store的使用介紹（附實例）

相關文章