vuex是基於vue框架的一個狀態管理庫，可以管理複雜應用的資料狀態，可以方便的實現組件之間的資料共享，例兄弟組件的通訊、多層嵌套的組件的傳值等等；它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式變化。
Vuex 是專為 Vue.js 應用程式開發的狀態管理模式，是基於vue框架的狀態管理函式庫。可以管理複雜應用的資料狀態，可以方便的實作元件之間的資料共享，例如兄弟元件的通訊、多層嵌套的元件的傳值等等。
Vuex採用集中式儲存管理應用的所有元件的狀態，並以對應的規則保證狀態以可預測的方式變更。
Vuex 也整合到 Vue 的官方偵錯工具 devtools extension，提供了諸如零配置的 time-travel 偵錯、狀態快照匯入匯出等進階偵錯功能。
Vuex中的核心特性
(1)State: 提供唯一的公共資料來源，所有共享的資料都要統一放到Store中的State中存儲
在元件中存取State的方式：
A.this.$store.state.全域資料名稱如：this.$store.state.count
##B.先按需導入mapState函數： import { mapState } from 'vuex'然後資料映射為運算屬性： computed:{ …mapState(['全域資料名稱']) }#( 2) Mutation：用於修改變更$store中的數使用方式：開啟store.js文件，在mutations中加入程式碼如下：
mutations: {
add(state,step){
//第一个形参永远都是state也就是$state对象
//第二个形参是调用add时传递的参数
state.count+=step;
}
}<button @click="Add">+1</button>
methods:{
Add(){
//使用commit函数调用mutations中的对应函数，
//第一个参数就是我们要调用的mutations中的函数名
//第二个参数就是传递给add函数的参数
this.$store.commit('add',10)
}
}import { mapMutations } from ‘vuex’
methods:{…mapMutations([‘add’])}import { mapState,mapMutations } from 'vuex'
export default {
data() {
return {}
},
methods:{
//获得mapMutations映射的sub函数
...mapMutations(['sub']),
//当点击按钮时触发Sub函数
Sub(){
//调用sub函数完成对数据的操作
this.sub(10);
}
},
computed:{
...mapState(['count'])
}
}操作步驟如下：
actions: {
addAsync(context,step){
setTimeout(()=>{
context.commit('add',step);
},2000)
}
}<button @click="AddAsync">...+1</button>
methods:{
AddAsync(){
this.$store.dispatch('addAsync',5)
}
}開啟store.js文件，加入getters，如下：
export default new Vuex.Store({
.......
getters:{
//添加了一个showNum的属性
showNum : state =>{
return '最新的count值为：'+state.count;
}
}
})<h3>{{$store.getters.showNum}}</h3>import { mapGetters } from 'vuex'
computed:{
...mapGetters(['showNum'])
}相關建議：更多程式相關知識，請造訪：
程式教學！ ！
以上是vuex有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
