這篇文章帶給大家的內容是關於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中文網其他相關文章！
