0.computed与watch
computed是基于它们的依赖进行缓存的,依赖发生变化,则计算属性发生变化。
watch是当watch 的值发生变化,则执行其中的函数
1.vuex
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation(devtool)。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
Action 提交的是 mutation,而不是直接变更状态。
配置store选项,指定为store对象,会自动将store对象注入到所以子组件当中,
a ) 在子组件中通过this.$store访问该store对象。
b )state定义属性(状态,数据);
getters用来获取属性;(可以认为是 store 的计算属性)
actions用来定义方法(动作);
commit提交变化mutations;
mutation定义变化
c ) 通过两个方法访问:
mapState获取state,mapGetters获取getters(数据),mapActions获取Actions(动作)
3. Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
要唤醒一个 mutation handler,你需要以相应的 type 调用store.commit方法
在 Vuex 中,mutation 都是同步事务:
4.Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
5. 项目创建过程
1)建立store ,把公共的getters,actions,mutations,以及types,modules建立,并从index引入export default newVuex.Store()
2)建立routert,从index引入 export default newRouter()
3)App.vue是主组件,main.js是主入口js。在main.js中创建实例,挂载主组件。
4) this.$store.dispatch('xxxx') 抛送xxxx事件(一般写在公共方法里面)
6.对于模块内部的 action,局部状态通过context.state暴露出来,根节点状态则为context.rootState
rootState,// 等同于 store.state, 只存在于模块中
7.watch响应式地监测一个 getter 方法的返回值,当值改变时调用回调函数。getter 接收 store 的状态作为唯一参数