精华内容
下载资源
问答
  • vue-store

    2021-04-27 15:15:50
    vuex 中 vue-store的使用

    store

    使用了vuex之后,自动绑定到vue实例上的数据,这个数据就是当前vuex仓库的实例对象。
    数据存放到仓库,每个组件都可以拿来用。

    1.如何将仓库中的state数据拿到组件中使用

    1. 通过 this.$store.state.xxxx的方式 (不推荐)
    2. 通过computed去取出仓库数据(推荐)
      ? 为什么使用仓库中的state数据需要computed中取出?
      !应为 state 中的数据不允许直接修改,用在computed中会更好,如果修改,会报错!
    3. 使用 mapState() 这个辅助函数的方式 (更推荐)

    mapState()

    import {mapState} from 'vuex'
    
    export default {
    	//一、这种方式缺点,组件不能使用多个computed,去创建本地的computed,例如 姓-名 的合并。且在html中调用的时候不能修改名字,仓库中是什么就是什么
    	computed:mapState(['仓库中的数据名'])
    
    	// 二 
    	computed:{
    		// abc() 可以任意修改
    		abc(){
    			return this.$store.state.xxx(仓库中数据名)
    		}
    	}
    	//三 ,需要使用多个computed的时候
    	computed:{
        ...mapState(['xxx(仓库中数据名)']),
        fullName () {
          return this.firstName + ' ' +this.lastName
        }
      },
    	
    }
    

    2.如何将仓库中getter数据拿到组件中使用

    1. this.$store.getters.xxx 的方式 (不推荐)
    2. 通过 computed 去仓库中取出 getter 的数据 (推荐)

    代码部分

    // 方法一
    
    // 方法二
     computed:{
      	//直接调用 aaa
        aaa(){
          return this.$store.getters.xxx(getters中的数据名)
        }
      },
     // 方法三
     import {mapGetter} from 'vuex'
    computed:{
    ...mapGetters(['xxx(仓库中名字)'])
    }
    

    3.如何修改仓库中的组件

    mutations是唯一可以修改仓库中数据的地方

    1.使用 commit 方法

    this.$store.commit(‘mutation的名字’,playload)

    //组件页面
    methods:{
        fn1(){
          this.$store.commit('addCar','123')
        }
    },
    
    //store文件下面 index.js 内容
     mutations: {
          // 添加商品到购物车
          // playload 传递来的参数
          addCar (state,playload) {
            console.log('添加商品到购物车', playload)
          }
      },
    

    2.通过 mapMutations() 辅助函数的方式(更推荐)

    
    import {mapMutations} from 'vuex'
    
    // mapMutations 与 mapState 、mapGetters 的使用方式不一样。
    // mapState 、mapGetters 在computed(计算属性)中使用
    // mapMutations 在methods (方法)中使用
    methods:{
    ...mapMutations(['addCar'])
    }
    
    /* 直接在HTML 中使用 addCar 进行传参就可了*/
    <button @click="addCar(item.id)">+</button>
    

    4.actions的使用

    actions - 里面存储的action 可以异步去修改 state 数据的地方,但是action不能直接修改。需要调用某个 mutation

    // index.js 文件中内容
    actions:{
    	// 第一个参数是 context(上下文内容,就是当前仓库实例)
    	// 第二个参数 playload
    	addAsync(context,id){
    		console.log(id)
    	}
    }
    //vue 组建中 内容
    //方法一
    methods:{
    	fn1(id){
    		this.$store.dispatch('addAsync',id)
    	}
    }
    
    //方法二 (更推荐)
    import { mapActions} from 'vuex'
    
    computed:{
    	...mapActions(['addAsync'])
    }
    

    在组件内也可以实现异步代码之后调用mutations,使用action是为了复用

    5.module(模块)

    //index.js 
     const moduleA = {
    	state:{
    		name:A
    	},
    	mutations:{},
    	getters:{},
    	actions:{}
     },
     const moduleB = {
    	state:{
    		name:B
    	},
    	mutations:{},
    	getters:{},
    	actions:{}
     }
     const store = new vuex.Store({
     	state:{
    		name:'main'
    	},
    	modules:{
    		a:moduleA,
    		b:moduleB
    	} 
    })
    

    module模块管理

    1.如何调用子模块state中数据?

    方法一
    <template>
      <div id="app">
        <p>app</p>
        <p>A模块的name :{{name}}</p>
      </div>
    </template>
    export default {
      computed:{
        name(){
          return this.$store.state.a.name
        }
      }
    
    }
    
    方法二
    <template>
      <div id="app">
        <p>app</p>
        <p>A模块的name :{{a.name}}</p>
      </div>
    </template>
    
    <script>
    import { mapState } from 'vuex'
    
    export default {
      computed:{
        ...mapState(['a'])
      }
    
    }
    </script>
    

    子模块中定义了相同的getters数据,会报错

    因为子模块的getters数据是挂载在全局上面的
    在这里插入图片描述
    默认情况下。模板内部的 action、mutation 和getter 是注册在全局命名空间的。这样使得多个模块能够对同一 mutation 或 action 做出响应。
    注意:命名不能相同

    在子模块中定义相同名字的 mutation、action。后续调用都会被执行
    希望拆分出来的模块能够独立,这时候就需要命名空间
    1. 定义模块的时候,设置一个 namespaced:ture

    2. mutation 与 action 找不到了
      1.mutation
      this.$store.commit(‘模块名 / mutation 名字’)

        computed:{
           ...mapState(['a']),
           ...mapGetters('a',['nameLengthA']),
           ...mapGetters('b',['nameLengthB'])
         },
         methods:{
           ...mapMutations('a',['hello'])
         }
      
    展开全文
  • 一、引入store到vue组件中 (1)store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state={ isCollapse:false } export default new Vuex.Store({ state }); (2)main.js ...

    一、引入store到vue组件中

    (1)store.js

    import Vue from 'vue';
    import Vuex from 'vuex';
     
    Vue.use(Vuex);
    const state={
      isCollapse:false
    }
     
    export default new Vuex.Store({
      state
    });
    
    

    (2)main.js

    import Vue from 'vue';
    import App from './App';
    import router from './router';
    import store from '@/vuex/store';
    /* eslint-disable no-new */
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app');
    
    

    (3).vue

    <template>
    <div>test if store exits</div>
    </template>
    <script>
    export default{
    mounted(){
    console.log("test store",this.$store);
    }
    }
    </script>
    
    

    小心,此处有坑,掉坑如下。。。在导入vue跟vuex时候,英文差把大小写写错,把v小写写成了大写(正因为如此store注入不到vue中,vue文件理所当然拿取不到),结果前方一大堆bug找你,不是store is not define 就是state is not define…三姑六婆都找你…更无语的是,在js文件里打出store是一个不报错对象,在vue文件里就成了undefine…此处有坑,前车之鉴,望友勿掉坑…

    import Vue from 'vue';
    import Vuex from 'Vuex';//!!!v要是小写
    
    

    本文属于转载,作者原文链接如下原文链接

    展开全文
  • 我们在开发vue项目的时候,不同的组件,父子组件之间,兄弟组件之间,根组件App.vue等等,都可以通过Vue.$store拿到vuex里面的共享数据源。那么这么多不同层级的组件到底是如何保证都拿到同一个store实例呢?我们从...

    我们在开发vue项目的时候,不同的组件,父子组件之间,兄弟组件之间,根组件App.vue等等,都可以通过Vue.$store拿到vuex里面的共享数据源。那么这么多不同层级的组件到底是如何保证都拿到同一个store实例呢?我们从vuex的源码上面浅显的聊聊中间的实现过程

    在这里插入图片描述
    首先在项目入口文件main.js中,我们从./store引入index.js,并且把引入的store作为初始化Vue的一个option对Vue进行初始化



    我们再来看看./store文件夹中index.js里面写了什么:
    在这里插入图片描述
    这里面引入了Vuex,并且调用Vue.use(Vuex)时候传入了Vuex。我们知道Vue.use()是我们vue中使用插件的一种方式,当执行Vue.use(some plugin)的时候,会执行插件内部的install方法



    我们再来看看vuex的源码里面install方法是怎么写的:
    在这里插入图片描述
    这个install方法就是安装Vuex时候调用的函数,在这个方法中,判断了当前传入的vue实例_Vue是否是之前调用install时缓存的vue实例,如果是同一个实例,就返回警告。
    然后我们重点看这行代码:

    applyMixin(Vue)
    

    顺藤摸瓜看一下applyMixin方法是干嘛的:
    在这里插入图片描述
    先检查了一下vue的版本,如果是vue2或者以上的版本,就调用Vue.mixin()方法,在这个方法里面创建了一个beforeCreate钩子,这个钩子执行vuexInit方法。我们继续看vuexInit方法实现了什么功能:
    在这里插入图片描述

    重点来了!

    我们看下这里面的代码,首先获取this.$options的值,这个值其实就是这个东西,在入口函数里,this.$options的值就是Vue实例里面的配置项:
    在这里插入图片描述
    在组件中,this.$options的值就是红框内部的东西
    在这里插入图片描述

    当拿到this.$options的选项之后,会查找选项中有没有store这个属性:
    在这里插入图片描述
    目前只有在入口函数main.js的Vue根实例中才有store属性,所以对于根实例,给它定义一个$store保存的就是this.$optionsstore
    在这里插入图片描述
    这个store就是引入的内容,也就是下面导出的东西,现在已经被挂载到根实例Vue的$this属性上了
    在这里插入图片描述




    如果不是根组件,比如对于子组件,代码里面是没有store的,那么就会走下面的逻辑
    在这里插入图片描述
    去查找子组件的父级组件,看看父组件是否存在并且父组件中是否有$store属性,如果有的话就给子组件自己定义一个属性$store,然后指向查找到的父组件的$store


    这样就实现了每个组件都拿到同一个store实例!

    以上都是个人理解,可能存在不对的地方,欢迎大佬们前来吐槽,讨论:D

    展开全文
  • 一、引入store到vue组件中(1)store.jsimport Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state={ isCollapse:false } export default new Vuex.Store({ state }); (2)main.jsimport ...

    先直接贴上注入store的正确操作

    一、引入store到vue组件中

    (1)store.js

    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    const state={
      isCollapse:false
    }
    
    export default new Vuex.Store({
      state
    });
    

    (2)main.js

    import Vue from 'vue';
    import App from './App';
    import router from './router';
    import store from '@/vuex/store';
    /* eslint-disable no-new */
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app');

    (3).vue

    <template>
    <div>test if store exits</div>
    </template>
    <script>
    export default{
    mounted(){
    console.log("test store",this.$store);
    }
    }
    </script>

    小心,此处有坑,掉坑如下。。。在导入vue跟vuex时候,英文差把大小写写错,把v小写写成了大写(正因为如此store注入不到vue中,vue文件理所当然拿取不到),结果前方一大堆bug找你,不是store is not define 就是state is not define....三姑六婆都找你...更无语的是,在js文件里打出store是一个不报错对象,在vue文件里就成了undefine....此处有坑,前车之鉴,望友勿掉坑...

    import Vue from 'vue';
    import Vuex from 'Vuex';//!!!v要是小写
    展开全文
  • /* get { Function } 获取系统变量的值 @param key String 要获取的变量对象名称,支持get('con.a.v', val) 多级对象设置 @return value Any 匹配的对象的值 */ var get = (key) => { if (key.indexOf('.') > -1)...
  • 在created中获取vuex中的数据,一进入页面能够拿到,但是页面刷新之后就拿不到数据 解释 store是原来存储组件状态的,不是用来做本地数据存储的。 本地存储可以用localStorage/sessionStorage或者cookie。 你可以...
  • 这是我的做法,基本上是照葫芦画瓢,我也不知道有没有更好的方法能拿到 tree组件的实例 element-tree 增加节点的方法 如果在模板中定于了 <el-tree>的数据源如下: <el-tree :data="nodeData"></el&...
  • vue-devtools 获取 vuex storeVue 实例的? https://github.com/vuejs/vue-devtools 安装了 vue-devTools 后,控制台能打印出这个全局对象: __VUE_DEVTOOLS_GLOBAL_HOOK__ 对象,这个...
  • Vuestore 使用方法讲解

    千次阅读 2021-04-25 17:39:53
    vuex 包含有五个基本的对象: ...就和vue的computed差不多; mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state。外部调用方式:store.co
  • 先新建一个role.vue页面,写上相应的布局和内容,然后在路由中添加这个页面。 然后开始写渲染数据的方法 前提,封装好了获取数据的api接口,并在main,js中注册了原型。 然后在 1,首先在api中获取接口, 2,在...
  • vuex store的运用:...vue.js的状态管理vuex中store的使用:https://blog.csdn.net/zeternityyt/article/details/80041526 vuex中store存储store.commit和store.dispatch的区别...
  • 解决vue刷新页面以后丢失store的数据

    千次阅读 2019-05-11 11:10:42
    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中,localStorage是永久储存,重新打开页面时会读取上一次打开的页面数据,sessionStorage时...
  • vue store之状态管理

    万次阅读 2019-05-15 15:00:38
    这3个都写在同一个组件(component)里面, 一般视图(View)触发方法动作(Actions),动作影响数据状态(State), 数据状态的改变又反应视图(View)上来,这样在一个组件内就形成了一个闭环。即当前组件的视图使用当前组件...
  • 首先 让我们看一下目录结构 从这个目录结构可以看出,用户的信息被缓存在store目录下面的userInfo当中,那么如何查看
  • 在js文件中使用vue的router和store

    千次阅读 2019-11-19 16:08:13
    在js文件中引入vue的路由配置文件 或者 store文件 import store from '../store'; import router from '../router'; //直接使用即可 router.push({'path': '/'}) store.state.XXX;
  • 详解vue3的setup中通过键值对的方式拿到vuex的state 一丶通过普通方式获取vuex中的state 首先引入我们的api import { useStore } from 'vuex'; import { computed } from 'vue'; 然后创建使用 export default...
  • 拿到一个vue+webpack项目,该如何去看

    千次阅读 2018-08-29 14:28:21
    这也是我目前自己这么理解的,可能每个人看代码的过程也不一样,我这里也是拿到一个项目之后不知道如何开始,所以自己在慢慢摸索,然后记录下来,希望自己能不断超越自己。这里我不能把公司项目亮出来,所以。。。...
  • 今天小编就为大家分享一篇vue之组件内监控$store中定义变量的变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 利用本地存储,解决问题Vue 刷新后用户名消失,store数据丢失
  • 一、axios在vue中啊 我们不需要去用原生XHR去发 ajax,因为啊 原生js写起来比较繁琐,并不易我们去开发, 我们可以通过axios去发ajax?看到axios不要觉得新词就很陌生官网: axios 是一个基于Promise 用于浏览器和 ...
  • vue.js访问不_this.$store的两种原因

    千次阅读 2020-06-21 09:19:28
    前些天在学习跟着学写一些vue,在其中有部分需要使用localStorage来获取并存储本地的存储值,并全局暴露该值,所以用到常用的vuex(推荐使用)。到时其中发现了这个问题: this.$store为undefined 最终排查发现有...
  • 关于vue store 全局缓存的问题

    千次阅读 2019-09-09 11:02:57
    个人使用 vuex 的管理方式 state :对数据的全局存储 getter: 可以理解为computed ,对数据进行计算 ...state,getter,mutations,actions的使用 和 访问 (使用this.$store 需要在main函数引用store...
  • Vue发axios请求,数据成功拿到,但是不能渲染到页面的问题。 昨天还还好的项目,今天开服务器代理报错。一开始以为代理有问题,就各种搜,无效。 最后竟然发现是接口出了问题!!! 找到新的接口后,拿到数据,但是...
  • 今天小编就为大家分享一篇vue.js 子组件无法获取父组件store值的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 解决vue中页面刷新之后store中数据丢失问题

    千次阅读 多人点赞 2020-03-17 11:25:13
    系统登录后获取系统菜单列表存入store中,发现在刷新页面之后,store中的菜单数据丢失了。 console打印数据 刷新页面之前 刷新页面之后 二、原因 刷新页面时,vue实例重新加载,从而,store也被重置了。...
  • vue

    2021-01-07 19:18:56
    Vue.js 简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 (1)Vue是一个渐进式的框架,什么是渐进式的呢? 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。 或者如果你希望将更多的...
  • Vue

    2020-11-17 18:41:05
    Vue Vue是一个渐进式的框架。Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于...
  • 如题: ...在App.vue的created中,添加监听,代码如下: //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$store.replaceState( Object.assign( {},
  • 通过store.state.tokenInfo.token

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,142
精华内容 3,256
关键字:

vue拿到store

vue 订阅