概述狭义~是所有组件都能访问到的一个对象;广义~状态管理模式

适用情况1.多个组件公用一个数据;2.多个组件更改同一个数

特点:专为 Vue.js 应用程序开发的 状态管理模式

          采用集中式存储管理应用的所有组件的状态

  以相应的规则保证状态以一种可预测的方式发生变化


使用步骤:
1.安装模块到生产依赖中 。 npm install vuex --save
vuex热身
2.main.js(也可以自定义文件)引入Vuex,用Vuex.use(Vuex)进行使用
vuex热身
3.定义一个容器,整个应用只有一个。new Vuex.Store({选项对象})

4.把容器注入根实例中。这个每个组件的实例上都有一个$store(为了每个子组件都可以使用stroe)

vuex热身

选项对象:
  • state:{//访问状态对象}
  • mutations:{//修改状态,改变state的数值的方法,必须写在mutations里 }
  • getters:{//计算过滤操作 }
  • actions:{//异步修改状态 }
1.读取state中的数据

vuex热身

2.修改state中的数据,必须写在mutations里,通过commit提交触发
  • data中的值,只能当前组件自己的改,别人的组件不能修改,因为不响应;可以用计算属性进行响应
  • mutations可以留下日志(实现可预测的要求)
  • 只能处理同步;
  • commit(事件名,传参),参数通常用对象,方便扩展; mutations:{事件名(state,接收参数)}

vuex热身

3.处理异步,通过actions提交
  • action提交的是mutation,而不是直接更改状态
  •  效果与mutations一样,前者直接commit提交mutations事件;后者先dispatch派发action事件,在action中再commit提交mutations事件

vuex热身

5.module

相关文章: