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"])
},
网友评论