目录
- vuex
- 构建vuex[多组件数据共享]环境
- 创建一个空仓库
- 核心概念 - state状态
- 核心概念 - mutations方法
- mutations语法
- 核心概念 - actions处理异步操作
- 核心概念 - getters
- 核心概念 - 模块module(进阶语法)
vuex
- 是什么
vuex是一个状态管理工具,状态就是数据
vuex是一个插件,帮我们管理vue通用的数据(多组件共享数据) - 使用场景
- 某个状态在很多个组件中使用(eg:个人信息)
- 多个组件共同维护一份数据(eg:购物车)
- 优势
- 共同维护一份数据,数据集中化管理
- 响应式变化
- 操作简洁(vuex提供了一些辅助函数)
构建vuex[多组件数据共享]环境
即创建项目
创建一个空仓库
- 安装vuex
yarn add vuex@3
,如果在创建项目时勾选了vuex则不需要执行这一步 - 新建vuex模块文件(新建store/index.js专门存放vuex)
- 创建仓库
Vue.use(Vuex) new Vuex.Store()
- 在main.js中导入挂载到Vue实例上
核心概念 - state状态
- 提供数据
- state提供唯一的公共源数据,所有要共享的数据都统一放在store中的state中存储,在state对象中添加要共享的数据
- state与data: state存储所有组件共享的数据,data存储自己的数据
- 使用数据
- 通过store直接访问
- 通过mapState辅助函数(简化)
mapState可以把store里的数据自动映射到组件的计算属性中- 导入mapState
import { mapState } from 'vuex'
- 数组方式引入state(computed中)
mapState(['count'])
- 展开运算符映射
computed: { ...mapState(['count']) }
- 导入mapState
核心概念 - mutations方法
vuex需要遵循单向数据流,组件中不能直接修改仓库的数据
eg:this.$store.state.count++
的写法是错误的,为了防止在项目的任意一个地方都能随意修改仓库的数据,就要开启严格模式
开启严格模式:在仓库中配置:strict: true
eg:
// 创建仓库(空仓库)
const store = new Vuex.Store({strict: true,state: {}
})
mutations语法
- 不传参语法
- 在仓库中定义mutations对象,对象中存放修改state方法
mutations: {addCount (state) {state.count += 1} }
2. 组件提交调用mutations
this.$store.commit('addCount')
- 传参语法
- 在仓库中定义mutations对象,对象中存放修改state方法
mutations: {// n就是提交载荷payloadaddCount (state, n) {state.count += n} }
- 组件提交调用mutations
this.$store.commit('addCount', n)
【注意】:传参语法只能传递一个参数,如果想传递多个参数,则可以包装成对象或数组
- 输入框实时输入更新
【注意】:因为要遵循单项数据流,所以不能用v-model双向绑定- 输入框内容渲染 :value
- 监听输入,获取内容 @input
- 封装mutations处理函数 mutations传参
- 调用传参 commit调用
- mapMutations辅助函数
mapMutations把位于mutations的方法提取了出来,映射到组件methods中
mapState在computed中映射状态,mapMutations在methods中映射方法- 导入
import { mapMutations } from 'vuex'
- 展开运算符(methods中)
- 调用
- 导入
核心概念 - actions处理异步操作
- 使用场景eg:等待一秒后修改state中的值
- 说明:mutations必须是同步的,便于监测数据变化,记录调试,异步操作由actions处理
- 语法:
- 在mutations中编写方法
- 提供actions方法
- 页面中dispatch调用
this.$store.dispatch('setAsyncCount', n)
- mapActions辅助函数
mapActions把位于actions的方法提取了出来,映射到组件methods中- 导入
import { mapActions } from 'vuex'
- 展开运算符(methods中)
- 调用
- 导入
核心概念 - getters
- 说明:除了state之外,有时我们还需要从state中派生一些状态,这些状态是一栏state的此时会用到getters
例如:state定义了list为1-10的数组,组件中需要显示大于5的数据 - 语法:
- 定义getters
- 访问getters
- 通过store访问
- 通过辅助函数mapGetters映射(在computed中)
- 定义getters
核心概念 - 模块module(进阶语法)
由于vuex使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得复杂时就会难以维护
模块拆分:
在store文件夹下新建modules文件夹,再在modules文件夹中创建各个模块文件,然后在index.js中引用
- 分模块语法
单个模块文件中:
index.js文件中:const state = {}const mutations = {} const actions = {} const getters = {}export default {state,mutations,actions,getters }
import user from './modules/user' modules: {user,setting }
- 使用模块中state的数据
- 直接通过模块名访问
$store.state.模块名.xxx
- 通过mapState映射
- 默认根级别的映射:
mapState(['xxx'])
- 子模块的映射(需要开启命名空间):
mapState('模块名', ['xxx'])
开启命名空间:export default { namespaced: true }
- 默认根级别的映射:
- 直接通过模块名访问
- 使用模块中getters的数据
- 直接通过模块名访问
$store.getters['模块名/xxx']
- 通过mapGetters映射
- 默认根级别的映射:
mapGetters(['xxx'])
- 子模块的映射(需要开启命名空间):
mapGetters('模块名', ['xxx'])
开启命名空间:export default { namespaced: true }
- 默认根级别的映射:
- 直接通过模块名访问
- 模块中的mutations调用语法
【注意】:默认模块的mutations和actions会被挂载到全局,需要开启命名空间,才会被挂载到子空间
调用子模块中的mutations:- 直接通过store调用
$store.commit('模块名/xxx', 额外参数)
- 通过mapMutations辅助函数映射
- 默认根级别的映射:
mapMutations('[xxx]')
- 子模块的映射:
mapMutations('模块名', '[xxx]')
- 默认根级别的映射:
- 直接通过store调用
- 模块中的actions调用语法
【注意】:默认模块的mutations和actions会被挂载到全局,需要开启命名空间,才会被挂载到子空间
调用子模块中的actions:- 直接通过store调用
$store.dispatch('模块名/xxx', 额外参数)
- 通过mapActions辅助函数映射
- 默认根级别的映射:
mapMutations('[xxx]')
- 子模块的映射:
mapMutations('模块名', '[xxx]')
- 默认根级别的映射:
- 直接通过store调用