一、介绍
- 1.vuex是为vue.js专门提供的
状态管理模式
,即将所有组件公用的数据、方法提取到指定的地方,进行统一管理
- 3.作用(为什么):解决了
兄弟组件间的通信
- 4.
面试
:子组件和父组件相互通信时props和$emit,项目大
了就用vuex
二、安装、使用vuex
步骤
1.在当前项目所在目录下载vuex(生产者模式下
)
2.、新建一个store的文件夹,在index.js文件中引入vue和vuex
3.使用vuex插件
// 使用vuex插件
Vue.use(Vuex)
4.vuex实例化
5.在main.js内导入vuex
6.将vuex挂载到vue实例中
三、核心概念(重点
)
3.1、state的使用
state
为vuex中的
公共状态,我们可以看成state为
所有组件的data
,用于保存所有组件
的公共数据
。
- 1.在index.js的state定义属性
- 2.在
所有组件
内通过this.$store.state
可以访问state里面的值
3.2、Mutations的使用
vuex中的mutations
可以理解为所有组件的methods方法
。mutations对象中保存了更改数据的回调函数
。第一个
参数为state``,第二个
参数为``payload,相当于自定义参数
,payload用来处理比如价格的改变
-
1.在Mutations里面写方法
-
2.在组件里面通过this.$store.commit(‘eventName’,自定义参数)调用方法
index.js
// 2.引入vue
import Vue from 'vue'
// 1.引入vuex
import Vuex from 'vuex'
// 3.使用vue插件
Vue.use(Vuex)
export default new Vuex.Store({
// 写五大核心
state: {
// 相当于data
num:1