Vuex 基础

Vuex实现任意组件的通信。
原理图：

其中数据存储在state对象中, 执行流程先调用dispatch方法调用actions中的方法，在actions调用mutations的方法提交 *** 作，state中的数据变化，然后重新渲染。

使用步骤 安装

npm i vuex

特别注意：vue2中只能使用3版本，vue3中只能使用4版本。
在src中新建store

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)
import home from "./home";
import search from "./search";
// 模块化vuex,更好的组织不同模块的数据
export default new Vuex.Store({
    modules: {
        home,
        search
    }
})

home/index.js
import { reqCategoryList, reqGetbannerList } from '@/api';
const state = {
    categorylist: [],
    bannerList: []
}
const mutations = {
    CategoryList(state, categorylist) {
        state.categorylist = categorylist;
        console.log(categorylist);
    },
    BannerList(state, bannerList) {
        state.bannerList = bannerList;
    }
}
const actions = {
    async categorylist({ commit }) {
        let res = await reqCategoryList();
        if (res.status == 200) {
            commit("CategoryList", res.data.data)
        }
    },
    async bannerlist({ commit }) {
        let res = await reqGetbannerList();

        if (res.code == 200) {

            commit("BannerList", res.data)
        }
    }

}
const getters = {}
export default {
    state,
    mutations,
    actions,
    getters
}

search/index.js
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default {
    state,
    mutations,
    actions,
    getters
}

模块化后的数据引用：

// 引用数据
this.$store.home.sum
this.$store.commit('home/ADD',data)

关于getters

将state中的数据加工后返回

const getters = {
bigSum(state) {
	return state.sum * 10 
}
}

使用

this.$store.getters.bigSum

如果模块化后使用：
读取值

this.$store.getters['personAbout/firstPersonName']

mapState 简化读数据 *** 作

没简化之前：
{{this.$store.state.sum}}

使用计算属性去简化

sum(){
return this.$store.state.sum
},
school(){
return this.$store.state.school
},
subject(){
return this.$store.state.subject
}

简化后：{{sum}}}
当变量名与state中的变量名不同时，对象式写法

...mapState({he:'sum',xuexiao:'school',xueke:'subject'}) 

在一个对象中将另一个对象的键值依次取出放到此对象中

let obj2 = {
	name : "n",
	age : 18
}
let obj = {
	...obj2
}

若果变量名和state中的变量名相同，数组写法

...mapState({'sum','school','subject'}) 

mapGetters 的用法和mapState一样

模块化后的mapState的使用

方式1

...mapState(['home'])
// 使用的时候
{{home.sum}}

方式2
第一个参数表示namespace, 需要开启namespace

search/index.js
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default {
	namesapce:true,
    state,
    mutations,
    actions,
    getters
}

...mapState('countAbout',['sum','school','subject']),
// 使用的时候就可以直接使用
{{sum}}

关于mapMutations 与mapActions

methods: {
	increment(){
		this.$store.commit('JIA',this.n)
	},
	decrement(){
		this.$store.commit('JIAN',this.n)
	},
	incrementOdd(){
		this.$store.dispatch('jiaOdd',this.n)
	},
	incrementWait(){
		this.$store.dispatch('jiaWait',this.n)
	},
},

简写：

...mapMutations({increment:'JIA',decrement:'JIAN'})
...mapMutations(['JIA','JIAN']),
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
...mapActions(['jiaOdd','jiaWait'])

需要注意的是，我们自己写的时候知道加那个参数，但是自动生成的时候，是这种形式

increment(value){
	this.$store.commit('JIA',value)
},
```
所以在使用的时候需要传参
```js
<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">当前求和为奇数再加</button>
<button @click="incrementWait(n)">等一等再加</button>
```
如果模块化后
```js
// 第一个参数为namespace，同样需要开启namespace
//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
```

注：本文中的代码示例来源于尚硅谷视频教学。