vuex跨组件通信

一、目录

1、vuex是什么,有什么用,什么时候用

2、vuex的几个核心概念

3、在项目配置vuex

4、在项目中使用vuex进行通信

5、vuex持久化

6、module

1、vuex是什么,有什么用,什么时候用

1、vuex是什么

             每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态  (state)。

Vuex 的状态存储是响应式的。

你不能直接改变 store 中的状态(变量的值),改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

2、vuex有什么用

             跨组件通信

3、什么时候用

             当两个组件不是父子关系的时候使用

2、vuex的核心概念

1、state 是一个对象,里面存放我们需要用的变量

2、getter 获取state里面的变量(非必须,用了会更方便)

3、mutation 用来改变state里面的变量(状态)

4、action 动作,用来提交mutation

5、module模块,项目需要用到state的变量很多的情况下,使用module来拆分(非必需,用了便于维护)

3、vuex存取的详细流程

定义变量: 在state里面是定义变量,比如isLogin:false

存(修改)变量: $store => action => mutation => 修改state里的isLogin的值

取: this.$store.state.isLogin,

通过getter来取

使用mapGetters把state里面的值映射到data里,然后可以this.xxx来获取

import { mapGetters } from 'vuex'

把值放入computed里

store持久化,避免刷新页面,所有数据重置

module配置,拆分模块方便维护

4、vuex持久化

安装 npm i vuex-persistedstate --save-dev

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({

   state,

   getters,

   mutations,

   plugins: [createPersistedState()]

})

5、使用module拆分store

定义模块,模块也会拥有state,getters,mutations,actions,module

导入模块

配置