一：数据丢失的原因vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。二：解决的思路将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）页面刷新后再从浏览器中取出三：解决方法方法一：直接在vuex修改数据方法中将数据存储到浏览器本地存储中importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);exportdefaul

一：数据丢失的原因vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。二：解决的思路将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）页面刷新后再从浏览器中取出三：解决方法方法一：直接在vuex修改数据方法中将数据存储到浏览器本地存储中importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);exportdefaul

💂个人网站:【海拥】【摸鱼游戏】【神级源码资源网】🤟前端学习课程：👉【28个案例趣学前端】【400个JS面试题】💅想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】目录Pinia和Vuex简介什么是Pinia？什么是Vuex？Pinia的特点模块化设计完整的开发工具支持Pinia很直观Pinia是可扩展的TypeScript支持Pinia轻量的Vuex的特点模块开发工具支持热重载TypeScript支持Pinia和Vuex的代码对比Pinia和Vuex的优缺点Pinia的优点Pinia的缺点Vuex的优点Vuex的缺点我应该使用哪个：Pinia还是Vuex？结论⭐️好书推荐Vuex

💂个人网站:【海拥】【摸鱼游戏】【神级源码资源网】🤟前端学习课程：👉【28个案例趣学前端】【400个JS面试题】💅想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】目录Pinia和Vuex简介什么是Pinia？什么是Vuex？Pinia的特点模块化设计完整的开发工具支持Pinia很直观Pinia是可扩展的TypeScript支持Pinia轻量的Vuex的特点模块开发工具支持热重载TypeScript支持Pinia和Vuex的代码对比Pinia和Vuex的优缺点Pinia的优点Pinia的缺点Vuex的优点Vuex的缺点我应该使用哪个：Pinia还是Vuex？结论⭐️好书推荐Vuex

1.状态管理2.用响应式API做简单状态管理3.Vuex基础4.Vuex核心概念5.Vuex+sessionStorage实现数据存储1.状态管理理论上来说，每一个Vue组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例：import{ref}from'vue'//状态constcount=ref(0)//动作functionincrement(){count.value++}{{count}}它是一个独立的单元，由以下几个部分组成：状态：驱动整个应用的数据源；视图：对状态的一种声明式映射；交互：状态根据用户在视图中的输入而作出相应变更的可能方式。下面是“单向数据流”

1.状态管理2.用响应式API做简单状态管理3.Vuex基础4.Vuex核心概念5.Vuex+sessionStorage实现数据存储1.状态管理理论上来说，每一个Vue组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例：import{ref}from'vue'//状态constcount=ref(0)//动作functionincrement(){count.value++}{{count}}它是一个独立的单元，由以下几个部分组成：状态：驱动整个应用的数据源；视图：对状态的一种声明式映射；交互：状态根据用户在视图中的输入而作出相应变更的可能方式。下面是“单向数据流”

前言这已经是《Vue+SpringBoot前后端分离项目实战》专栏的前端部分第8篇博客了，服务端部分由天哥（天哥主页）负责，目前专栏目录如下：Vue+SpringBoot前后端分离项目实战-前端部分1. 手把手带你做一套毕业设计-征程开启2. 我应该把毕业设计做到什么程度才能过关？3. 

前言这已经是《Vue+SpringBoot前后端分离项目实战》专栏的前端部分第8篇博客了，服务端部分由天哥（天哥主页）负责，目前专栏目录如下：Vue+SpringBoot前后端分离项目实战-前端部分1. 手把手带你做一套毕业设计-征程开启2. 我应该把毕业设计做到什么程度才能过关？3. 

文章の目录一、定义Action二、触发Action1、触发actions的第一种方式2、触发actions的第二种方式：2.1、从vuex中按需导入mapActions函数2.2、将指定的actions函数，映射为当前组件的methods函数写在最后Action用于处理异步任务。如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。一、定义Action//创建store数据源，提供唯一公共数据exportdefaultnewVue.Store({ //state中存放的就是全局共享的数据 state:{

文章の目录一、定义Action二、触发Action1、触发actions的第一种方式2、触发actions的第二种方式：2.1、从vuex中按需导入mapActions函数2.2、将指定的actions函数，映射为当前组件的methods函数写在最后Action用于处理异步任务。如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。一、定义Action//创建store数据源，提供唯一公共数据exportdefaultnewVue.Store({ //state中存放的就是全局共享的数据 state:{