Vuex 跨组件通信
一、
是什么？有什么用？什么时候用？
1、是vue.js中管理数据状态（变量）的一个库，通过创建一个集中数据存储，来供所有组件访问
-
特点
-
（1）每一个Vuex应用的核心就是store（仓库），store基本上就是一个容器，它包含着应用中大部分的状态（state）
- store本质是对象
- state本质是变量
（2）Vuex的状态存储是响应式的（即 一个组件对state的状态进行修改，其他组件对state的状态引用也会跟着发生改变）
（3）不能直接改变store中的状态（state），改变store中的状态的唯一途径就是显式地提交（commit）mutation
-
2、可用于跨组件通信
3、当组件不是父子关系的时候可以使用
二、的核心概念
1、state：是一个对象，里面存放我们需要用的变量
2、getter：用于获取state里面的变量（非必须，用了会更方便）
- 需要一个参数，参数为state
3、mutation：用于改变state里面的状态
- 第一个参数为state，第二参数为修改的值
4、action：（动作）用于提交（commit）mutation
- 第一个参数用于接收与store相同的属性和方法，第二参数为修改的值
-
：例如可用于发送ajax请求数据
5、module：（模块）项目需要用到state的变量很多的情况下，使用module来拆分（非必须，用了便于维护）
（1）定义模块：模块也会拥有state、getters、mutattions、actions、modules
（2）模块导出：在模块中定义完成后，通过export default 导出
/**
* 配置关于城市的vuex
*/
const state = {
cityName: ''
}
const getters = {
cityName: state => state.cityName
}
const mutations = {
updateCity(state, payload) {
state.cityName = payload
}
}
export default {
state,
getters,
mutations
}
（3）模块导入：
//导入城市的modules
import city from './modules/city'
三、配置
1、安装Vuex
npm i vuex --save
2、配置Vuex
import Vue from 'vue';
import Vuex from 'vuex';
//导入城市的modules
import city from './modules/city'
Vue.use(Vuex)
1、定义state
const state = {
msg: 'hello world',
}
2、定义getters，用于获取state，需要一个参数，参数为state
const getters = {
msg: state => state.msg
}
3、定义mutation,用于修改state，第一个参数为state，第二参数为修改的值
const mutations = {
updateMsg(state, payload) {
state.msg = payload
}
}
4、定义action，commit =》 mutation，第一个参数用于接收与store相同的属性和方法，第二参数为修改的值
const actions = {
updateMsg(context, payload) {
context.commit('updateMsg', payload)
}
}
5、导出vuex实例
export default new Vuex.Store({
state,
getters,
mutations,
actions,
modules: {
city
}
})
四、存取
1、定义变量：在state里面定义变量
eg： isLogin：false
2、存（修改）变量
$store（派发dispatch） ==> action （提交commit）==> mutation （修改）==> state里面的值
methods: {
changeMsg() {
（第一种、dispatch（派发）action）
this.$store.dispatch("updateMsg", this.text);
（第二种、直接commit （提交）mutation）
this.$store.commit("updateMsg", this.text);
}
}
3、取
- （1）直接取
this.$store.state.msg
-
（2）通过getter来取（module中的状态也可以直接映射获取）
- 第一步：使用mapGetters把state里面的值映射到data里，然后就可以通过this来调用
import { mapGetters } from "vuex";
- 第二步：把值放入computed里
computed: {
...mapGetters(["msg"])
},
