vuex用法记录

Vuex简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

图片 1.png

State: 驱动应用的数据源；

View: 以声明方式将State映射到视图；

Actions: 响应在View上的用户输入导致的状态变化。

每一个 Vuex应用的核心就是store（仓库）。"store"基本上就是一个容器，它包含着你的应用中大部分的状态(state)。Vuex和单纯的全局对象有以下两点不同：

1. Vuex的state是响应式的。当Vue组件从store中读取状态的时候，若store中的state发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit) 转变（ mutations ）。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

什么时候使用vuex

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。一般如果不打算开发大型单页应用，使用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对象获取数据

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

还可以通过vuex提供的mapState方法获取state数据

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

Vuex用法——getters

getters相当于计算属性，依赖于state和其他getters

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

可以通过vuex提供的mapGetters方法获取getters数据

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

Vuex用法——mutations和actions

1. mutations用于注册一组修改state的同步事件；
2. actions用于提交mutations事件，其中可包含较复杂的异步方法。

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

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。