写给新手同学的vuex快速上手指北小结
本文介绍了写给新手同学的vuex快速上手指北小结,分享给大家,具体如下
引入
//store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: {...}, mutations: {...}, actions: {...} }) export default store //main.js ... import store from './store' Vue.prototype.$store = store const app = new Vue({ store,... }) ... //test.vue 使用时: import {mapState,mapMutations} from 'vuex'
State篇
state更新实时渲染是基于==computed==这个计算属性的,直接赋给data只能赋值初始值,不会随着state改变实时渲染
<!--state改变不会实时渲染--> export default { data() { return { name:this.$store.state.name, }; }, }
<!--监听state改变重新渲染视图--> <template> <div> {{name}} </div> <template> export default { computed: { name() { return this.$store.state.name; } }, }
注意: data中的变量如果和computed中的变量重名,data优先,注意命名
获取多个state值,写多个函数return,很繁琐,所以有==mapState==辅助函数
<!--取多个很冗余,繁琐--> export default { computed: { token(){ return this.$store.state.token; }, name(){ return this.$store.state.name; } }, }
<!--mapState 直接取出--> import { mapState } from 'vuex' export default { computed: mapState([ 'token', 'name' ]) }
我们有局部计算,怎么和mapState一起用?
import { mapState } from 'vuex' export default { computed:{ getTime(){ return 123; }, ...mapState([ 'token', 'name' ]) } }
我们为它起个别名
<template> <div> xiaokeai,dahuilang是我们取的别名 token,name是state的值 {{xiaokeai}} </div> <template> <script> import { mapState } from 'vuex' export default { computed:{ ...mapState({ xiaokeai:"token", dahuilang:"name", }) } } </script>
我们要state和data发生点什么
<template> <div> 假如token的值123; balabala的值就是 123皮卡皮 {{balabala}} </div> <template> <script> import { mapState } from 'vuex' export default { data(){ return { pikaqiu:"皮卡皮卡" } } computed:{ ...mapState({ xiaokeai:"token", dahuilang:"name", // 为了能够使用 `this` 获取局部状态,使用一个自定义名字的函数 balabala(state){ return state.token + this.pikaqiu; } }) } } </script>
取个对象值怎么破?
<template> <div> {{daSon}} {{xiaoSon}} </div> </template> <script> import { mapState } from 'vuex' export default { data(){ return { pikaqiu:"皮卡皮卡" } } computed:{ ...mapState({ daSon: state=>state.obj.yeye.baba.daSon, xiaoSon:state=>state.obj.yeye.baba.xiaoSon, }) } } </script>
这种方式取对象写到业务里不直观,也不共用,下节==Getter==有更优的方案
Getter篇
Getter是针对state的【对象】值提前做一些处理,以便用的时候直接提取
可以 this.$store.getters.xxx 使用,也可以使用mapGetters辅助函数,==辅助函数注意:== 和state一样,注入在computed中
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { obj: { yeye: { baba: { daSon: "老大", xiaoSon: "老二" } } } }, getters: { <!--将想要提取或者处理的值这里处理好--> getson: state => { return state.obj.yeye.baba; } } }) export default store <!--用的时候,和state一样,也可以别名等等操作--> <template> <div> {{getson}} </div> </template> <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters([ getson ]) } } </script>
Mutation篇
操作: this.$store.commit("名字","值");
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { token: "vuex的token", }, mutations: { setToken(state, val) { state.token = val; } } }) export default store
mapMutations 辅助函数,和state一样,可以别名, ==注意:== 辅助函数注入在methods中
methods: { ...mapMutations([ 'setToken' ]) } <!--使用--> this.setToken(100); //token修改为100
Mutation 必须是同步函数,不要误解这句话,以为异步不能用,异步可以用在里面,视图的渲染,取值都没有问题,问题在于:调试的时候,一些浏览器调试插件不能正确监听state。所以方便调试,尽量将异步写入action中
Action篇
注意action的 参数不是 state ,而是context,context里面包含commit,state。基本操作:this.$store.dispatch("函数名","值")
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) <!--辅助函数操作 注入在methods中--> import { mapActions } from 'vuex' export default { methods: { ...mapActions([ "increment" ]) } } <!--使用--> this.increment(123);
module篇
module 目的将store按功能拆分成多个文件,利于维护管理,module 分为2种情况,1.是有命名空间, 2.是没有命名空间
没有命名空间: action、mutation 和 getter 是注册在全局的,所以要注意,方法函数不要设置同名了,如果同名了会都执行。
stete例外是局部。
import Vue from 'vue'; import Vuex from 'vuex'; import moduleA from "./modules/cat.js"; Vue.use(Vuex); const store = new Vuex.Store({ state: { token: "vuex的token", }, modules:{ moduleA } }) export default store; <!--moduleA.js--> export default { // namespaced: true, state: { cat:"我是cat", }, mutations: { setCat(state, val) { state.cat = val; } }, actions: { }, getters: { } };
无命名空间 取值
this.$store.state.moduleA.cat 或者 ...mapState({ cat:state=>state.moduleA.cat, }), 不可以(state是局部,不可以这么取): ...mapState([ "cat" ]),
无命名空间 改变值
和原来一样,因为方法是注册在全局的 this.$store.commit("setCat",666); 或者 ...mapMutations([ "setCat" ])
有命名空间: state, action、mutation 和 getter 是局部的,模块间命名互相不冲突,可以重名。
namespaced 设置为true,即可开启
<!--moduleA.js 文件--> export default { namespaced: true, state: { cat:"我是cat", } }
有命名空间取值
this.$store.state.moduleA.cat 或者 <!--注意这里:命名空间的名字带上,在modules注册时候呢个key值--> <!--也可以别名,方法和之前一样,就是第一个参数是空间名--> ...mapState("moduleA",[ "cat" ])
有命名空间 改变值
<!--只是第一个参数是空间名,其他操作一样--> ...mapMutations("moduleA",[ "setCat" ]) this.setCat(888); 或者: this.$store.commit("moduleA/setCat",666);
最后 plugins
vuex页面刷新会丢失数据,用vuex-persistedstate插件可解决
import createPersistedState from "vuex-persistedstate"; const store = new Vuex.Store({ state: {}, mutations: {}, actions: {}, getters: {}, modules:{}, plugins: [ createPersistedState({ storage: window.sessionStorage }) ] }) export default store
相关文章
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
- 如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下...2021-09-29
- 这篇文章主要分享vuex中mapState思想及应用,在需求开发过程中,有的接口返回的结果中有很多字段需要展示到页面上。通常可以将这些字段在.vue文件中封装为计算属性,或者重新将对应字段赋值到 data 中的字段来达到便于使用的目的,具体内容,我们一起来看下面文章内容吧...2021-10-09
- 这篇文章主要介绍了解决vuex刷新数据消失问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-12
- 这篇文章主要给大家介绍了Vue.js实战之Vuex的入门教程,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。...2017-04-03
- 这篇文章主要为大家介绍了Vuex的属性和作用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2021-12-27
- 这篇文章主要介绍了关于vuex强刷数据丢失问题解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-09
vuex 多模块时 模块内部的mutation和action的调用方式
这篇文章主要介绍了vuex 多模块时 模块内部的mutation和action的调用方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-25- 在vuex的时候刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题,这篇文章主要给大家介绍了关于vuex数据持久化的两种实现方案,需要的朋友可以参考下...2021-07-13
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
这篇文章主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-01- 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长,为了解决这个问题,Vue 提供 vuex,这篇文章主要给大家介绍了关于vuex项目中登录状态管理的相关资料,需要的朋友可以参考下...2021-09-23
- 这篇文章主要介绍了Vuex及其使用方法,感兴趣的同学,可以参考下...2021-04-25
- 这篇文章主要介绍了深入理解Vuex的作用,对Vuex感兴趣的同学,可以参考下...2021-05-12
- 在vue3.x中vuex调取值在html代码里可以直接使用vue2.x的方法,但是在js里与vue2.x就有了那么一丢丢的不同,下面这篇文章主要给大家介绍了关于Vue3中Vuex详细使用的相关资料,需要的朋友可以参考下...2022-07-08
- 这篇文章主要为大家介绍了vue运用之vuex持久化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2021-12-23
- 这篇文章主要介绍了vuex刷新页面后如何解决丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-12-02
- 这篇文章主要为大家介绍了vuex Mutations同步Actions异步原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-12-12
- 这篇文章主要介绍了vuex store 缓存存储原理,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-07-27
- 最近参与了公司一个新的B端项目的研发,从无到有搭建项目的过程中,遇到了关于项目鉴权的问题,这篇文章主要给大家介绍了关于如何使用Vuex实现Vue后台管理中的角色鉴权的相关资料,需要的朋友可以参考下...2022-05-27