Vuex簡介

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式

圖片 1.png

State: 驅(qū)動應(yīng)用的數(shù)據(jù)源；

View: 以聲明方式將State映射到視圖；

Actions: 響應(yīng)在View上的用戶輸入導(dǎo)致的狀態(tài)變化。

每一個 Vuex應(yīng)用的核心就是store（倉庫）。"store"基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài)(state)。Vuex和單純的全局對象有以下兩點不同：

1. Vuex的state是響應(yīng)式的。當(dāng)Vue組件從store中讀取狀態(tài)的時候，若store中的state發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。
2. 你不能直接改變store中的狀態(tài)。改變store中的狀態(tài)的唯一途徑就是顯式地提交(commit) 轉(zhuǎn)變（ mutations ）。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。

什么時候使用vuex

雖然 Vuex 可以幫助我們管理共享狀態(tài)，但也附帶了更多的概念和框架。這需要對短期和長期效益進(jìn)行權(quán)衡。一般如果不打算開發(fā)大型單頁應(yīng)用，使用Vuex可能是繁瑣冗余的，通過event-bus即可解決問題。

Vuex用法——state

 state: {
    todoList: [{
      'todo': '待辦1',
      'done': false
    },
    {
      'todo': '待辦2',
      'done': false
    },
    {
      'todo': '待辦3',
      'done': false
    },
    {
      'todo': '待辦4',
      'done': false
    },
    {
      'todo': '待辦5',
      'done': false
    }]
  }

可在組件中通過$store.state對象獲取數(shù)據(jù)

computed: {
   todoList () {
     return this.$store.state.todoList
   }
}

還可以通過vuex提供的mapState方法獲取state數(shù)據(jù)

computed: {
    ...mapState(['todoList']),
    todoUndo () {
      return this.todoList.filter((todo) => {
        return !todo.done
      })
    }
  }

Vuex用法——getters

getters相當(dāng)于計算屬性，依賴于state和其他getters

getters: {
    undos (state) {
      return state.todoList.filter(todo => !todo.done)
    }
  }

可以通過vuex提供的mapGetters方法獲取getters數(shù)據(jù)

...mapGetters({
  todoUndo: 'undos'
})

Vuex用法——mutations和actions

1. mutations用于注冊一組修改state的同步事件；
2. actions用于提交mutations事件，其中可包含較復(fù)雜的異步方法。

mutations: {
  TODO_ADD (state, payload) {
    state.todoList.push(payload.todo)
  },
  TODO_DONE (state, payload) {
    state.todoList[payload.index].done = true
  },
    TODO_DEL (state, payload) {
    state.todoList.splice(payload.index, 1)
  }
},
  actions: {
  todoAdd ({ commit }, todo) {
    commit({
      type: 'TODO_ADD',
      todo: todo,
      done: todo.done
      })
  }
}

Vuex用法——modules

由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時，store對象就有可能變得相當(dāng)臃腫。

為了解決以上問題，Vuex 允許我們將store分割成模塊（module）。每個模塊擁有自己的state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割。