Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。

vuex有哪幾種屬性

有五種，分別是State、 Getter、Mutation 、Action、Module

state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)

getters => 從基本數(shù)據(jù)派生出來的數(shù)據(jù)

mutations => 提交更改數(shù)據(jù)的方法，同步！

actions => 像一個(gè)裝飾器，包裹mutations，使之可以異步。

modules => 模塊化Vuex

a) 在vue組件里面，通過dispatch來觸發(fā)actions提交修改數(shù)據(jù)的操作。

b) 然后再通過actions的commit來觸發(fā)mutations來修改數(shù)據(jù)。

c) mutations接收到commit的請求，就會自動通過Mutate來修改state（數(shù)據(jù)中心里面的數(shù)據(jù)狀態(tài)）里面的數(shù)據(jù)。

d) 最后由store觸發(fā)每一個(gè)調(diào)用它的組件的更新

Vuex的作用：項(xiàng)目數(shù)據(jù)狀態(tài)的集中管理，復(fù)雜組件(如兄弟組件、遠(yuǎn)房親戚組件)的數(shù)據(jù)通信問題。

Vue組件（action里面的dispatch）---》actions（方法commit）---》mutations（Mutate）---》state（getter）---》store更新所有調(diào)用vuex的組件（Vue Component組件）

mapState輔助函數(shù)computed: mapState([// 映射 this.count 為 store.state.count'count' ])相當(dāng)于 computed:{count(){ return this.$store.state.count } }computed: mapState({// 箭頭函數(shù)可使代碼更簡練count: state => state.count,// 傳字符串參數(shù) 'count' 等同于 `state => state.count`// countAlias : state => state.count,countAlias: 'count',// 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)countPlusLocalState (state) {return state.count + this.localCount} })通過屬性訪問的：const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)},doneTodosCount: (state, getters) => {return getters.doneTodos.length}} })//使用方法 computed: {doneTodosCount () {return this.$store.doneTodos // [{ id: 1, text: '...', done: true }]} }還有一種情況，自帶getter參數(shù)的 //使用方法 computed: {doneTodosCount () {return this.$store.getters.doneTodosCount //2} }通過方法訪問的：（注意，getter 在通過方法訪問時(shí)，每次都會去進(jìn)行調(diào)用，而不會緩存結(jié)果）const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {getTodoById: (state) => (id) => {return state.todos.find(todo => todo.id === id)}} })//使用方法 computed: {doneTodosCount () {return this.$store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }} } mapGetters函數(shù)import { mapGetters } from 'vuex'export default {// ...computed: {// 使用對象展開運(yùn)算符將 getter 混入 computed 對象中...mapGetters(['doneTodosCount','anotherGetter',// ...])} } //相當(dāng)于 export default {// ...computed: {doneTodosCount:this.$store.getters.doneTodosCount,anotherGetter :this.$store.getters.anotherGetter } }mutation特點(diǎn)

每個(gè) mutation 都有一個(gè)字符串的事件類型 (type)和 一個(gè)回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會接受 state 作為第一個(gè)參數(shù)：

const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 變更狀態(tài)state.count++}} })// ... mutations: {increment (state, n) {state.count += n} }store.commit('increment', 10)

總結(jié)

以上是生活随笔為你收集整理的getter方法的作用 vuex_Vuex的工作流程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。