vue:基础:vuex

0、vuex 刷新时数据会丢失,如何实现长久化存储?

(1)存储到本地

(2)用vuex-persist 插件,针对vuex产生的,不需要手动获取storage,直接存储到 localStorage 或者 cookie 中。

1、Vuex 的流程?

        vuex 是解决 vue 状态管理的,集中式存储

2、vuex 适用于什么场景?

        适用于多组件数据共享、跨组件传递数据

3、vuex的流程是什么?

        页面通过 mapAction 异步提交请求到 action, action 通过 commit 把参数同步提交到 mutation,mutation 把修改的值放到 state中,通过 getter 把值丢出去,页面中在 computed 中通过 mapGetter 拿到state 的值。

4、vuex 有几个特性是什么?分别什么作用?【5个特性】

        五个特性是:state、getter、mutation、action、module( mapAction)

        (1)state: 用来存储变量的。

        (2)getter: 可以理解成计算属性。

        (3)mutation: 提交数据的方法,只能进行同步操作。

        (4)action: 和 mutation 功能类似,可以访问 mutation 中的方法。

                不同点:1、可以进行异步操作 2、提交的 mutation, 不能直接修改状态;

        (5)module: 模块化vue,让每个模块可以拥有自己的 state、getter、mutation、action。

5、vuex 中的 Action 和 mutation 有什么区别?

        mutation 类似于事件,每个 mutation 都有自己的 type 和 回调方法,回调方法里面用于存放 state 的值,并且默认 state 是第一参数。只支持同步,是一个提交数据的方法。

        action 可以支持异步操作,提交的 mutation ,不能直接改变状态。

        注)vuex 中唯一更改状态的方法就是 mutation 。

6、vuex 如何存储状态?有两种方法

        (1)dispatch : 异步时使用,使用方法:this.$store.dispatch({ 'action方法', 值 })

        (2)commit : 同步时使用,使用方法:this.$store.commit({ 'mutation方法' , 值 })

7、vue 中的 axios 是写在 action 中还是 methods 中?

分两种情况

        1、如果只有请求数据,不需要在 action 中。

        2、如果是多组件重复使用数据,放在 action 中。也就是复用时候,action 中,包装成 promise 返回,用async await 处理数据。

8、vuex如何判断当前state是外部修改还是通过mutation修改的?

        vuex 中修改 state 的唯一方法就是 commit, 其底层是通过 this.withCommit 设置 Commiting 变量为 true,然后才能修改 state,修改完会还原该变量,外部是修改不了Commiting 的标识的;需要 watch 监听一下 statte,stateChange 时判断这个变量是不是 true,就知道修改和的合法性。

猜你喜欢

转载自blog.csdn.net/u013592575/article/details/126703252
今日推荐