一、Vuex 介绍
- 状态管理模式 + 库
- 参考官方文档:Vuex 是什么? | Vuex (vuejs.org)
1. 多个组件之间共享数据,并且共享的数据是响应式的,即数据的变更能及时渲染到模版
2. vuex 会集中管理所有组件的状态
-
将所有组件之间需要共享的数据提取出来存储在一个位置让 vuex 集中管理
3. 安装 vuex
npm install vuex@next --save
4. 核心概念
-
state:状态对象,将共享数据集中定义在状态对象中
-
mutations:用于修改共享数据(一个事件),必须是同步函数
不能直接修改共享数据,只能通过 mutations 来修改
-
actions:类似于mutations,但是可以包含异步操作,通过调用 mutations 来改变共享数据
二、使用方式
1. 使用 Vuex 状态管理模式
- 方式一:创建带有 vuex 功能的脚手架工程
- 方式二:在项目中安装 vuex 之后使用 vuex
- 在 mian.js 中引入 vuex,在创建 Vue 实例时使用 Vuex
Vue.use(Vuex);
2. 定义和展示共享数据
- 定义数据
state: {
name: 'Ghost'
}
- 展示数据:(使用插值表达式)从 vuex 库中取出数据
{{$store.state.name}}
3. 修改共享数据(同步操作)
-
在 mutations 中定义函数,修改共享数据
// 将形参newName的值赋给共享数据state.name,页面会立即响应新的name值
mutations: {
setName(state, newName){
state.name = newName;
}
}
// mutations中定义的函数不能直接调用,需要this.$store.commit('方法名', 参数)
methods: {
handleUpdate() {
this.$store.commit('setName', '李四') # state不需要传,会自动传
}
}
4. 异步操作修改共享数据
- actions 中定义函数,用于调用 mutations
- 在 actions 中发送 ajax 请求
- 指定请求路径 url、请求方式 post、请求体 data(username、password)
- 在前端发送 ajax 请求会有跨域问题,需要配置代理
- 在服务端响应成功的回调函数中使用 mutations 中定义的修改 name 的方法
-
通过上下文对象 context.commit('mutations中的方法', 参数) 调用指定方法
-
传入的参数是在服务端返回的数据 res.data 中获取的
-
-
在入口页面 App.vue 中调用 actions 中的方法修改共享数据 name
-
定义一个按钮,给按钮绑定单击事件 @click=handleCallActions
-
在组件的 methods 中定义事件 handleCallActions,在方法中通过 this.$store.dispatch('方法名') 调用 actions 中的指定方法
-