2024年前端最新一文彻底搞懂vuex,2024年最新前端刷面试题的网站

最后

由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

const store = new Vuex.Store({

state,

mutations,

actions,

getters,

plugins: [createPersistedState({

storage: sessionStorage,

key: “token”

})]//会自动保存创建的状态。刷新还在

})

参数:

storage:存储方式。(sessionStorage,localStarage) key:定义本地存储中的key

5. 高级语法---- 模块化管理数据 (modules)

1. 什么时候需要用到模块管理vuex数据。

项目庞大,数据信息量特别大的时候,我们可以考虑分模块形式管理数据,比如user模块管理用户信息数据,cart模块管理购物车数据,shop模块管理商品信息数据。

import vue from ‘vue’

import Vuex from ‘vuex’

Vue.use(vuex);

const state= ()=>{ token:‘’}

const actions = {

set_token({commit},val){

commit(“to_token”,val)

}

}

const mutations = {

to_token(state,val){

state.token=val;

}

}

const getters = {}

//user模块

let user = {

namespaced: true, //一定要开始命名空间。

state: { userid: 1234 },

actions: {

},

mutations: {

SET_USERID(state, val) {

state.userid = val;

}

},

getters: {

}

}

//购物车数据的模块

let cart = {

namespaced: true,

state: { userid: 567 },

actions: {

},

mutations: {

},

getters: {

}

}

const store = new Vuex.Store({

state,

mutations,

actions,

getters,

modules: {

user,

cart

},

plugins: [createPersistedState({

storage: sessionStorage,

key: “token”

})]//会自动保存创建的状态。刷新还在

})

export default store

home.vue如何使用

获取user模块的userid

this.$store.state.user.userid

this.$store.commit(“user/SET_USERID”,12345)// 前面是指定模块user 中的SET_USERID 方法,后面是传参 可以是对象、数组、字符串等

6. 高级用法----- 辅助函数(语法糖)

1. 有那几个辅助函数(4大金刚)

mapState,mapActions,mapMutations,mapGetters

2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的

3. 如何使用

home.vue

{{ token }}

{{ token - x }}

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!

g_convert/45f2869b91b538dd3bb3290ba13bc806.png)

虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!

  • 27
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值