這篇文章帶給大家的內容是關於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 'store.js的路径'import { mapMutations } from 'vuex'methods:{ ...mapMutations([ 'updateUserInfo' ]) } </script>
在需要更新資料的地方,將資料更新進去
this.updateUserInfo(data)
二、取得資料
<script> import store from 'store.js的路径'import { mapState } from 'vuex'computed: { ...mapState({ userInfo: 'userInfo' }) }, created() { console.log(this.userInfo) } </script>
在created || mounted || methods等需要的地方取得資料
註:也可在同一頁面設定&&取得資料
import { mapMutations, mapState } from 'vuex'
相關推薦:
############################################### #####Vue.js之vuex(狀態管理)#######以上是vuex中store的使用介紹(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!