Vuex基础知识总结

1. Vuex的运行流程

1. Vue组件中调用dispatch方法触发对应的action
2. action中包含同步/异步操作，可以在action中进行后台API请求、触发其他action以及提交mutation操作
3. mutation方法中对state对象进行修改，只能执行同步操作
4. state中的数据修改后，页面进行响应式更新

2. Vuex的实现原理

• Vuex的数据响应式是通过new Vue实现的
• 组件的$store属性是通过使用全局混入 Vue.mixin 在所有组件的beforeCreate生命周期内注入的

3. 核心概念

• state：vuex的基本数据，用来存储变量。

• getter：从state派生的数据，相当于state的计算属性。

• mutation：更新数据的同步函数（必须是同步的）。接受 state 作为第一个参数，提交载荷作为第二个参数。

• action：和mutation的功能大致相同，不同之处在于：Action 通过提交mutation来修改数据；Action可以包含任意异步操作。

• modules：模块化Vuex，可以让每一个模块拥有自己的state、mutation、action、getters，从而使结构清晰，方便管理。

4. Vuex数据持久化

• vuex-persistedstate插件
• vuex-persist插件
• sessionStorage和localStorage