前端Vue篇之Vuex中action和mutation的区别、Vuex 和 localStorage 的区别

目录

Vuex中action和mutation的区别

Mutation

Mutation是用于修改Vuex store中状态的函数。它们是同步的操作，只能进行简单的状态修改，例如更改一个变量的数值。Mutation负责确保状态的可追踪性，因为每次状态变更都可以被记录下来。

• Mutation 是用于变更（改变）Vuex store 中的状态的唯一方式。
• 它是一个同步操作，用于变更状态。
• Mutation 是通过提交(commit)来触发的，它可以使状态的变化变得可追踪。
• 在mutation中应该只进行简单的状态修改，不应该包含异步操作或复杂逻辑。

案例代码：

// 在Vuex store中定义一个mutationmutations:{increment(state){
    state.count++}}// 在组件中提交mutationmethods:{increment(){this.$store.commit('increment')}}

思路描述：
在这个例子中，当调用

increment

方法时，会触发名为

increment

的mutation，这个mutation会将

state

中的

count

属性加一。

需要注意的点：

• Mutation应该是同步的，用于简单的状态修改。
• 每个mutation都有一个字符串类型的事件类型（type），这个类型被用来在store中提交对应的mutation。

Action

Action用于处理异步操作，例如发起网络请求或者执行一系列的mutation。它可以包含任意异步操作，是一个更灵活的状态变更方式。

• Action 用于处理异步操作，例如异步API请求、定时器、以及一系列的mutation。
• 它可以包含任意异步操作，是一个更灵活的状态变更方式。
• 通过分发(dispatch)来触发action，action内部可以包含任意异步操作，并且可以触发多个mutation。
• Action 可以用于封装复杂的业务逻辑，或者在多个mutation之间进行协调和组合。

案例代码：

// 在Vuex store中定义一个actionactions:{incrementAsync(context){setTimeout(()=>{
      context.commit('increment')},1000)}}// 在组件中分发actionmethods:{incrementAsync(){this.$store.dispatch('incrementAsync')}}

思路描述：
在这个例子中，当调用

incrementAsync

方法时，会触发名为

incrementAsync

的action，这个action会在1秒后提交一个名为

increment

的mutation。

需要注意的点：

• Action可以包含任意异步操作，并且可以触发多个mutation。
• Action通过context参数可以访问到commit方法，用于提交mutation。

Mutation用于同步操作、进行简单的状态修改，保证状态的可追踪性；而Action用于处理异步操作，可以包含复杂的业务逻辑，并且可以触发多个mutation。在实践中，Mutation应该用于同步变更状态，而Action则适用于处理异步操作和复杂的状态变更逻辑。在实际应用中，通常情况下，当需要进行状态的同步变更时，应该使用Mutation；当需要进行异步操作，例如发起网络请求或者进行一系列复杂的状态变更时，应该使用Action。

Vuex 和 localStorage 的区别

Vuex 和 localStorage 是两个在前端开发中经常使用的概念，它们有着不同的作用和使用场景。

Vuex

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。它允许我们在一个集中的位置管理应用的所有组件的状态，并且提供了一些工具来保证状态的可维护性。它适用于中大型的前端应用，特别是在状态共享和管理变得复杂的情况下。

• 适用范围：通常用于管理大型复杂的前端应用程序中的状态。
• 特点：集中式管理、能够进行状态的追踪与调试、可以进行状态的响应式更新。
• 优点：提供了一种清晰的方式来管理状态，可以追踪状态的变化，便于调试和维护。

localStorage

localStorage 是浏览器提供的一种存储机制，用于在浏览器端存储数据。它提供了一种简单的键值对存储方式，可以将数据存储在用户端的浏览器中，即使用户关闭了浏览器，数据也可以被保留下来。

• 适用范围：用于在浏览器端存储一些简单的用户数据，例如用户配置、本地缓存等。
• 特点：数据存储在浏览器端，关闭浏览器再打开依然可用。
• 优点：便于在用户端实现持久化存储，可以在不同页面之间共享数据。

最重要的区别

Vuex中的状态存储在内存中，而localStorage则以文件的方式存储在本地。Vuex可以存储任意JavaScript对象，而localStorage只能存储字符串类型的数据，存储对象需要使用JSON的stringify和parse方法进行处理。读取内存比读取硬盘速度要快。

应用场景

Vuex用于管理应用程序中的状态。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它通常用于组件之间的数据传递和共享状态。

localStorage是本地存储的一种方式，用于将数据存储到浏览器中。它适用于跨页面传递数据，以及在用户端实现持久化存储。

永久性

刷新页面时，Vuex存储的值会丢失，而localStorage不会丢失。

其他注意事项

• Vuex能做到数据的响应式更新，而localStorage无法做到。
• 对于不变的数据，可以使用localStorage代替Vuex，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localStorage无法做到，因为它缺乏响应式更新的能力。

总的来说，Vuex主要用于管理应用的状态，特别是在大型复杂应用中，它提供了一种集中式的状态管理机制，适用于组件之间的数据传递和共享状态；而localStorage主要用于在浏览器端进行简单的数据存储，提供了一种持久化存储的机制，便于在用户端进行数据的保存和读取。在实际开发中，它们通常会结合使用，例如将Vuex中的某些状态缓存到localStorage中，以实现状态的持久化。

持续学习总结记录中，回顾一下上面的内容：
在Vuex中，Action和Mutation都是用来改变状态的。它们的主要区别在于：Mutation是同步的，而Action是异步的。Mutation是用来改变状态的，而Action是用来处理异步操作的，例如网络请求。
Vuex和localStorage的主要区别在于：Vuex是一个状态管理工具，它可以帮助我们在Vue应用程序中管理应用程序的状态。而localStorage是浏览器提供的一个本地存储的API，它可以帮助我们在浏览器中存储数据。Vuex的状态是响应式的，当状态改变时，相关的组件会自动更新。而localStorage存储的数据是非响应式的，当数据改变时，相关的组件不会自动更新。