vuex使用流程是什么样的?【专栏07】
前端人
共 4404字,需浏览 9分钟
·
2021-06-05 18:10
这道题在Vue面试岗位还是问的挺多的
一、使用Vuex的目的
实现多组件状态管理,多个组件之间需要数据共享
二、Vuex 的五大核心
其中state和mutation是必须的,其他可根据需求来加
1、state 负责状态管理,类似于vue中的data,用于初始化数据
2、mutation 专用于修改state中的数据,通过commit触发
3、action 可以处理异步,通过dispatch触发,不能直接修改state,首先在组件中通过dispatch触发action,然后在action函数内部commit触发mutation,通过mutation修改state状态值
4、getter Vuex中的计算属性,相当于vue中的computed,依赖于state状态值,状态值一旦改变,getter会重新计算,也就是说,当一个数据依赖于另一个数据发生变化时,就要使用getter
5、module 模块化管理
使用流程
1.创建store实例并且导出 store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
//声明state
state: {
userInfo:{ userName:"" }
},
//声明mutations
mutations: {
setUserInfo(state,userInfo){
state.userInfo = userInfo
}
},
//声明actions
actions: {
setUserInfo({ commit },userInfo){
commit('setUserInfo',userInfo)
}
},
//声明getters
getters:{
userName(state){
return "姓名:"+state.userInfo.userName
}
}
})
export default store
2.引入Vuex
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
render: h => h(App),
store
}).$mount('#app')
3.组件内使用
使用方式一
<template>
<div>
<!-- state使用 -->
<p>{{$store.state.userInfo.userName}}</p>
<!-- getters使用 -->
<p>{{$store.getters.userName}}</p>
<!-- action使用 -->
<p @click="setInfo">存储信息</p>
</div>
</template>
export default {
methods: {
setInfo(){
this.$store.commit('setUserInfo',{
userName:"鬼鬼"
})
}
}
}
使用方式二
<template>
<div>
<!-- state使用 -->
<p>{{userInfo.userName}}</p>
<!-- getters使用 -->
<p>{{userName}}</p>
<!-- action使用 -->
<p @click="setInfo">存储信息</p>
</div>
</template>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
methods: {
...mapActions(['setUserInfo']),
// ...mapMutations(["setUserInfo"]),
setInfo(){
this.setUserInfo({
userName:"鬼鬼"
})
},
computed: {
...mapState({
userInfo: state => state.userInfo
}),
...mapGetters(['userName']),
}
}
参考资料
https://blog.csdn.net/u012967771/article/details/114132555 https://cnblogs.com/leslie1943/p/13370639.html?utm_source=tuicool
说明
本专栏总共汇总了
150道题
,每道题目答案没有多余扯皮的部分,就是单纯的答案。每天一到面试题,人人都能冲击
30k+
,点击↓关注【鬼哥】我当前进度【#007题】,如果你能点赞分享、鬼哥骑自行车也是开心的
套卷所有题目都在这个题库小程序↓
评论
你的名片是什么样的?你见过最好的名片是什么样?
大学时候班主任让我们全班人帮他设计一张名片,内容上大家都是一样的,但除了内容,其他各种乱七八糟的都有。圆的方的看的班主任哭笑不得。我也不记得最后到底用的谁的设计,只记得就设计这个过程就足够伤脑。要简洁,要有创意,还要有让人把它留下来的欲望。
可是再怎么让人耳目一新的名片,揣进口袋也可能再也找不到了,甚至连自己都忘了这张名片的存在。
我是在工作之后开始接触电子名片的,第一眼感觉就是内容多,使用方便。
微信直接搜索小程序“帮推名片”不占用手机内存,用起来十分快捷方便
这是打开名片的第一视角,姓名,手机,邮箱等传统名片应有的信息都有,并且免去了繁复的设计烦恼,海量的模板任我挑选,选择一款自己中意的就好。
名片上手机可以一键拨号,
悦目名片
0
智能客服机器人是什么样的?
智能客服机器人应该具备从“看得到”到“看得懂”到“懂得答”三个递进的能力,最终应该达到“懂得答”的境界。
目力所及的客服机器人离真正“懂得答”中间还差着好几个阿尔法狗的距离,大部分基本都停留在通过文字识别和知识库模型技术凑合够得上“看得到”和假装“看得懂”的阶段。
没有自然语言语义理解、知识库自主学习能力的客服机器人,它只能接收到你的文字符号还能把接收到的声音转化为文字,可它还是不理解你在问什么(举个例子:初学英语,一个句子里的每个单词你都知道是什么意思,但是你就是不知道这句话他要表达啥),更别说怎么回答,要是能给你的答案也是风马牛不相及。
所以当你遇到答非所问的客服机器人时千万别生气,不是它逗你玩,是它大脑还不健全。
那么
莓商量
0