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: '通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到
const Counter = {
template: `{{ count }}`,
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