Vuex 管理狀態（資料）

這個狀態自管理應用包含以下幾個部分：

以下是乙個表示「單向資料流」理念的簡單示意：

但是，當我們的應用遇到多個元件共享狀態時，單向資料流的簡潔性很容易被破壞：

state用來儲存模組中使用的資料

mutations是用來儲存操作state中的資料的方法

action是用來儲存非同步的方法

vuex中修改state 只能是mutations action 不是直接修改狀態而是提交 mutation mutation去修改state

特點： vuex規定 mutation不要包含非同步請求，action可以包含

我們來簡單寫乙個數字加減的方法

vue專案中的列表如下，在./src/store/index.js中操作vuex的狀態，其中的**如下

import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
// 輸出vuex的資料
export default new vuex.store(,
mutations: ,
reducenum (state, num) 
},actions: , n) , 2000)}},
modules: 
})

在./src/main.js中接受vuex的資料後，我們就可以在元件呼叫期中的資料

import vue from 'vue'
import router from './router'
// 接受vuex的資料
import store from './store'
vue.config.productiontip = false
new vue(}
減少

這樣我們就可以實現對state中資料num的增加和減少以及非同步增加的功能

mapstate 簡化元件中獲取state步驟

mapmutations 簡化元件中提交mutation的操作

mapactions 簡化元件中觸發action的操作

import  from 'vuex
, computed: 
}使用狀態
}提交mutation
this.addnum(引數)
提交action
this.addnumasync(引數)

getters

相當於 vuex中的計算屬性使用場景：某個狀態需要依賴另乙個狀態存在，當這個狀態改變時，getter會重新計算

store = ,
getters: 
}}在元件中如何獲取
1,this.$store.getters.numdouble
2,通過助手函式
import from 'vuex'
computed:

注意：

不要直接修改getter的值，vuex也沒有提供修改getter的方法，應該去修改依賴 state中的資料

module

預設store是單一狀態樹，應用的所有狀態會集中到乙個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。

const modulea = ),
mutations: ,
actions: ,
getters: 
}const moduleb = ),
mutations: ,
actions: 
}const store = new vuex.store(
})

如何在元件中使用
獲取this.$store.state.模組.num
如何提交mutations 或者action
1,this.$store.commit('addnum')
this.$store.dispatch('addnumasync')
注意： mutations和actions預設提交 沒有模組化，會導致 
所以的模組中 同名mutation或者action同時觸發
？如何解決這個問題
你可以通過新增 namespaced: true 的方式使其成為帶命名空間的模組。當模組被註冊後，它的所有 getter、action 及 mutation 都會自動根據模組註冊的路徑調整命名
const modulea = ),
mutations: ,
actions: ,
getters: 
}const store = new vuex.store(
})提交
this.$store.commit('a/addnum')
如果助手函式
methods: 
可以通過
this['a/addnum'](params)
methods: 
this.addnum() 提交a模組中的addnum

我們也可以將本來都寫在index中的資料分離

index.js寫成

import vue from 'vue'
import vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import modulea from './modulea'
vue.use(vuex) // vue原型中會加入乙個例項物件 $store
// 初始化store
const store = new vuex.store(
})export default store

將原本解除安裝index的資料單獨寫乙個js檔案

state.js

export default

mutation.js

export default ,
reducenum (state, num) 
}

action.js

export default , n) , 2000)
}}

getter.js

export default  
}

狀態管理庫vuex 狀態管理庫vuex

vuex是乙個專為vue.js應用程式開發的管理庫。狀態就是指元件之間共享的資料 vue專案中配置狀態管理庫vuex的流程 2建立狀態管理庫物件store 3對外丟擲store物件 4在mian.js中將store物件與當前專案相關聯 vuex是乙個專為vue.js應用程式開發的管理庫。狀態就是指元...

vuex狀態管理

在 vue.js 的專案中，如果專案結構簡單，父子元件之間的資料傳遞可以使用 props 或者 emit 等方式但是如果是大型專案，很多時候都需要在子元件之間傳遞資料，使用之前的方式就不太方便。vue 的狀態管理工具 vuex 完美的解決了這個問題。一安裝並引入 vuex 專案結構首先使用 n...

vuex 狀態管理

1.乙個const 物件用來管理系統中的變數。在元件中，當乙個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用mapstate輔助函式幫助我們生成計算屬性。當對映的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給mapstate傳乙個...

Vuex 管理狀態（資料）

狀態管理庫vuex 狀態管理庫vuex

vuex狀態管理

vuex 狀態管理

相關推薦