概述:狭义~是所有组件都能访问到的一个对象;广义~状态管理模式
适用情况:1.多个组件公用一个数据;2.多个组件更改同一个数
特点:专为 Vue.js 应用程序开发的 状态管理模式
采用集中式存储管理应用的所有组件的状态
以相应的规则保证状态以一种可预测的方式发生变化
1.安装模块到生产依赖中 。 npm install vuex --save
2.main.js(也可以自定义文件)引入Vuex,用Vuex.use(Vuex)进行使用
3.定义一个容器,整个应用只有一个。new Vuex.Store({选项对象})
4.把容器注入根实例中。这个每个组件的实例上都有一个$store(为了每个子组件都可以使用stroe)
选项对象:
- state:{//访问状态对象}
- mutations:{//修改状态,改变state的数值的方法,必须写在mutations里 }
- getters:{//计算过滤操作 }
- actions:{//异步修改状态 }
1.读取state中的数据
2.修改state中的数据,必须写在mutations里,通过commit提交触发
- data中的值,只能当前组件自己的改,别人的组件不能修改,因为不响应;可以用计算属性进行响应
- mutations可以留下日志(实现可预测的要求)
- 只能处理同步;
- commit(事件名,传参),参数通常用对象,方便扩展; mutations:{事件名(state,接收参数)}
3.处理异步,通过actions提交
- action提交的是mutation,而不是直接更改状态
- 效果与mutations一样,前者直接commit提交mutations事件;后者先dispatch派发action事件,在action中再commit提交mutations事件
5.module