资料
尚硅谷视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=108
官网：https://v3.vuex.vuejs.org/zh/
安装
注意：vue的版本要和vuex的版本差一个版本，也就是：
- vue2要用vuex3
- vue3要用vuex4
先看一下自己使用的vue的版本：打开项目的package.json文件，看到目前用的vue2，因此，要安装vuex3
安装vuex3的命令；其他版本，替换下面命令中的3
npm install vuex@3
使用
快速开始
新建store 目录，和App.vue平级：
在store目录下新建index.js文件，内容如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//类似vue中的data，时k-v键值对，如：
//name:""
},
actions:{
//函数名一般使用驼峰命名法
//可以收到两个个参数：上下文信息、传的参数；一般调用commit在mutations中处理state中的数据，如：
//updateName(context, val) {
// context.commit('UPDATE_NAME')
//}
},
mutations: {
//一般使用大写字母命名
//可以收到两个参数，state、传的参数；用于处理state中的数据，如：
//UPDATE_NAME(state, val) {
// state.name = val
//}
},
getters: {
//类似vue的computed
//可以收到两个参数：state、整个getters
//getNameLength(state, getters) {
// return state.name.length;
//}
}
})
在main.js中引入刚刚创建的文件：（./store/index可简写为./store）
基本使用（非模块化）：
例子：
例如，我们使用如下内容，替换/store/index.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
sum: 0
},
actions:{
add(context,val){
context.commit("ADD",val)
}
},
mutations: {
ADD(state,val){
state.sum += val;
},
})
并在某个模块（记为A模块）的methods中使用：
methods:{
add(){
this.$store.dispatch("add",this.optionVal)
}
}
具体工作流程：
当然，如果逻辑比较简单，也可以在模块的方法中直接调用mutation中的方法，此时，需要调用$store.commit方法。
例如上面的例子，A模块中的放可以写成：
this.$store.commit("ADD",this.optionVal)
辅助函数
导入
前提：需要引入对应函数：(用哪个引入哪个)
import {
mapState, mapGetters, mapActions, mapMutations} from "vuex";
参数
mapXxx的参数一般有两种：
- 对象，大致对应关系是：（后面的是字符串，不能简写）适用于要
重命名的时候
- 数组，此时表示上述对象的key和value相同：（注意单引号。）
mapState
下图三个方法的效果等价:
mapGetters
下图三个方法的效果等价:
// bigSum(){
// return this.$store.getters.bigSum
// },
// ...mapGetters(['bigSum']),
...mapGetters({
bigSum:"bigSum"
}),
mapMutations
下图三个方法的效果等价:
// ADD(){
// this.$store.commit("ADD",this.optionVal)
// },
// ...mapMutations(["ADD"]),
...mapMutations({
ADD:"ADD"}),
mapActions
下图三个方法的效果等价:
// addIfOdd(){
// this.$store.dispatch("addIfOdd",this.optionVal)
// },
//...mapActions(['addIfOdd']),
...mapActions({
addIfOdd:'addIfOdd',
}),
模块化：
步骤：
修改store/index.js:
修改mapXxx辅助函数：
-
第一个参数为命名空间，就是这个：
-
第二个参数和本文
使用>基本使用>辅助函数的第一个参数一致。
例子：
大致执行流程：
