Vue:(五)Vuex

2018-12-04

Vuex可以保存组件之间的共享数据，相当于一个全局的数据仓库，所有组件都可以获取和修改数据。组件内私有的数据可以放到组件的data中。props中存放的是父组件传过来的数据。

一.state&mutations

//新建store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {//类似组件中的data
    count: 0
  },
  mutations: {//类似组件中的methods，操作数据
    increment (state) {
      state.count++
    }
  }
})
//在组件中可以通过this.$store.state获取状态对象，通过this.$store.commit方法触发状态变更
this.$store.commit('increment')
console.log(this.$store.state.count) // -> 1

二.Getter

getter（可以认为是store的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

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)
    }
  }
})
//在组件中访问:this.$store.getters.xxx
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

三.Action

action类似mutation，不同在于：

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

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

四.Module

应用程序复杂，管理的状态较多时，store对象可以分割成模块。

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