vue的状态管理系统——vuex
vuex是什么？
vuex官方解释是专为 Vue.js 应用程序开发的状态管理模式。通俗来说vuex好比是给一个大家族修建了一个仓库，保存这每个人的货物状态。
vuex的开始
vuex的核心store（仓库）
store就是一个仓库 ，所有的组件数据状态都在store里保存。
1.Vuex 的状态存储是响应式的。
2.改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
vuex的核心概念
vuex的脚手架安装
npm install vuex --save
vue-cli配置：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
创建vuex仓库（store）
你可以新建一个js文件也可以直接写在脚手架的main.js文件的里面
如果是新建的js文件一定不要忘记引入到main.js文件里
import storeConfig from './vuex/store'
一定不要忘记在vue实列上面挂载store
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
创建vuex仓库（store）
const store = new Vuex Store({
state: {
count:0
},
mutations: {
increment (state){
state.count++
}
}
})
获取状态state
通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更。
store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
// 创建一个 Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: { //computed计算机属性
count () {
return store.state.count
}
}
}
Getter
可以理解为是一个公用的计算机属性,
Getter 就是把组件中共有的对state 的操作进行了提取，它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。
我没用过 ，所以我不会这个。点击查看官方文档
Mutation（同步）
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)
mutation好比一个事件容器，里面写的全是可以提交的方法事件
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
这个mutations不能直接调用想要改变数据必须得通过commit提交一个mutation才可以，这是改变数据的唯一途径
fun(){
store.commit('increment')
}
Action（异步）
Action 类似于 mutation，不同的是Action 可以包含任意异步操作。
最常用的是购物车调用异步 API 和分发多重 mutation：
actions: {
checkout ({ commit, state }, products) {
// 把当前购物车的物品备份起来
const savedCartItems = [...state.cart.added]
// 发出结账请求，然后乐观地清空购物车
commit(types.CHECKOUT_REQUEST)
// 购物 API 接受一个成功回调和一个失败回调
shop.buyProducts(
products,
// 成功操作
() => commit(types.CHECKOUT_SUCCESS),
// 失败操作
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}
Model
模块化
当应用变得非常复杂时，store 对象就有可能变得相当臃肿，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 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 的状态
