Vuex的一些知识点

vuex的一些知识点

vuex是vue的状态管理工具通过安装

npm install vuex --save

vuex是一个专为vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证以一种可预测的方式发生变化，类似于本地存储
store是每一个vuex应用的核心就是store（仓库）基本可以想象为一个容器，它包含着你的应用中大部分的状态，vuex和单纯的全局对象有以下两点不同

vuex的状态存储是响应式的，当vue组件从store中读取的状态，若store中的状态发生变化，那么相应的组件也会相应的得到高效更新
你不能直接改变store中的状态，改变store中的状态唯一途径就是显式的提交mutation，这样使得我们可以方便的追踪每一个状态的变化，从而让我们实现一些工具帮助我们更好的理解我们的应用

state

Vuex通过store选项，提供了一种机制将状态从根组件“注入”到每一个子组件（调用Vue.use(Vuex)）
使用脚手架搭建起来项目后在main.js中引入Vuex

import Vue from 'vue'
import App from './App'
// import router from './router'
import store from './vuex/store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // router,
    store,
  components: { App },
  template: '<App/>'
})

通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

更改vuex的store中的状态的唯一方法是提交mutation Vuex中的mutation都有一个字符串中的事件类型和一个回调函数，这个回调函数就是我们实际进行状态改变的地方，并且他会接受state作为第一个参数

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

不能直接调用mutations handler，这个选项更像是事件注册：“当触发一个类型为increment”的mutation时，是要使用

store.commit('increment')

提交载荷
可以向store.commit传入额外的参数，即mutation 的载荷

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

对象风格的提交方式

store.commit({
  type: 'increment',
  amount: 10
})

Action

Action类似于mutation 不同在于

Action 提交的时mutation 而不是直接变更状态
Action可以包含任意异步操作
注册一个简单的aciton
让我们来注册一个简单的action

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 函数接受一个与store 实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个mutation 或者通过context.state和context.getters来获取state和getters 实践中我们经常用到参数结构来简化代码

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

分发Action

Action通过 store.dispatch 方法触发：

store.dispatch('increment')

Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

在组件中分发 Action

在组件中使用this.$store.dispatch('xxx')分发action

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store对象就有可能变得臃肿
为了解决以上问题，Vuex允许我们将store分割成模块，每个模块拥有自己的state、mutation、action、getter 甚至是嵌套子模块

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

参考资料：
Vuex