一 vuex的一些知识
1.1 vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
1.2 安装
//npm
npm install vuex --save
//yarn
yarn add vuex
在模块化中使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
1.3 什么时候使用
当项目比较大时,各个组件之间有共享的数据时使用,例如购物车.
二 核心概念
state
仓库,保存要共享的数据
// 仓库 数据定义在这个对象的内部
// Vue实例的data属性
state: {
info: '感觉自己萌萌哒',
num: 10
},
在组件中访问
<h2>我是顶级的Vue实例{{ $store.state.info }}--{{$store.state.num}}</h2>
mutations
更改state中的状态,也就是修改state中的数据,
回调函数(必须是同步函数),只能传两个参数,第一个是state,传多个,后面的是undefined,所以要传多个时,第二个可以传对象或数组;
// 提供的数据修改方法
mutations: {
// 参数1 固定是state就是 仓库内部的 state
addNum(state) {
console.log(state)
// 在这里直接修改数据
state.num++
},
// 接收参数
addNumPlus(state, num) {
console.log(num)
// 累加传过来的值
state.num += num
},
// 除了state之外只能接收一个参数 多余部分会变成undefined
注意当你动态的添加属性时,这个属性不是响应式的,需要使用Vue.set(obj, 'newProp', 123)
第一个参数表示要填加属性的对象
第二个参数表示要添加的属性名
第三个参数表示要添加的属性值
在组件中使用
addNum2() {
// 调用仓库方法
this.$store.commit('addNum')//addNum为mutations中的回调函数名
}
}
这样使用比较麻烦,每次使用名字比较长,可以使用辅助函数mapMutations配合展开运算符...
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
}
getters
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
// Vuex的计算属性
getters: {
// 参数1 数据 state
biggerNum(state) {
// 返回num 并乘以2
return state.num * 2
}
}
Getter 会暴露为 store.getters 对象，你可以以属性的形式在组件中访问这些值：
{{ $store.getters.biggerNum }}
getters的辅助函数,使用之后组件中使用state中的名字就可以了{{属性名}}
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
actions
actions类似于mutations,不同的是
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
官方文档说的很详细,这里就不记录了
