VueX

使用Vuex对Vue组件中的状态进行管理，简化了组件间的通信

• 使用new Vuex.Store创建一个store

• store对象定义了状态和改变的方法mutations

• 使用store的commit调用对应的mutation方法改变store的状态

• 使用store.state.属性名，获取组件的状态

简单使用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

改变状态后，获取对应的值

store.commit('increment')

console.log(store.state.count) // -> 1

可以在根组件中直接注入store，这时候在子组件中可以通过this.$store.property访问对应的stat；类似router的注入

//根组件中注入
new Vue({
  el: '#app',
  store: store,
})

计算属性与state属性重名时

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

getter可以从state属性中派生出数据

访问store.getters.doneTodos就可以访问派生数据

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

不仅仅可以派生出数据，还可以返回一个箭头函数，在组件中使用函数对state.数据进行操作

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
//调用函数
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

更改state的状态

更改state的唯一办法就是提交mutation，其中更改状态类似于一个事件，使用commit函数更像是触发对应的更改事件；在提交mutation时，还可以给事件传递载荷，参数把；不过在申明的时候就要告诉mutation。

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

使用常量代替mutation中的事件名字

在大型项目中非常实用，尤其是多人协作的项目里

action与mutation

action有利于参数解构，简化代码

使用state.dispatch出发对应的action；并且action支持异步操作而mutation不支持异步操作

store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：

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

module解决单一状态树问题

当项目变得庞大时，store对象就可能变得十分臃肿；为了解决这个问题Vuex运行我们将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 的状态

而子模块内部中mutation、gettter函数接收的第一个参数就是子模快store对象，第三个参数则是根节点的store对象；类似路由的嵌套

动态的注册模块

import Vuex from 'vuex'

const store = new Vuex.Store({ /* 选项 */ })

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})