使用Vuex - Githubissues

安装： npm install --save vuex

引入：

import Vuex from 'vuex'
Vue.use(Vuex)

State

存储状态数据

在根实例中注册 store 选项，就能通过this.$store.state获取数据

new Vue({
  el: '#app',
  store,// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  render: h => h(App)
})

mapState辅助函数，将state映射到计算属性中去

//我是组件

import {mapState} from 'vuex'
export default {
  computed: mapState({
    count: state => state.count
  })
}

改变State中的状态，相当于注册一个事件，每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。必须为同步函数。

mutations: {
    mutationName(state) {
      // 在此改变state中的数据
    }
  }

当触发一个mutationName时，需要调用此函数： store.commit(mutationName)

提交载荷（Payload）你可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload）：

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
})

在组件中使用this.$store.commit('mutationName')触发：

methods: {
    handleClick() {
      this.$store.commit('mutationName')
    }
  }

或者使用辅助函数mapMutations直接将触发函数映射到methods上，

methods: mapMutations([
    'mutationName'
  ])

也可以用于改变状态。 Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。

actions: {
  actionName({ commit }) {
    //dosomething
    commit('mutationName')
  }
}

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

有些状态需要做二次处理，就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。

const getters = {
  strLength: state => state.aString.length
}

//上面的代码根据aString状态派生出了一个strLength状态

在组件中使用

import {mapGetters} from 'vuex'

//我是一个组件
export default {
  computed: mapGetters([
    'strLength'
  ])
}