vue从仓库state中取不到数据的问题

目录
  • 从仓库state中取不到数据
  • 监听store中state数据方法

从仓库state中取不到数据

今天写项目要从仓库中取出一个值，但我一直取得是undefined，各种测试百度，然而我犯了一个低级的错误

我项目中将数据库模块化，原本为app模块，新添加user模块

我在store文件下又建立了子文件user.js，然后在index.js将其引入

然后我直接使用this.$store.state.value去取值，是取不到的，如果index.js文件里的state中也有value这个变量，该语句取到的是index.js中的value值

如果想要获取user.js中的值,需要多一个路径this.$store.state.user.value

监听store中state数据方法

computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
    LifeVal() {
      return this.$store.state.LifeVal;
    },
    danceVal(){
      return this.$store.state.danceVal;
    }
  },
  watch: {
    danceVal: function() {
        LifeVal = this.$store.state.LifeVal = this.$store.state.danceVal
        /* vuex : changeDanceVal是store中mutations里的方法
           // 修改state的唯一方法，只允许同步函数
                 mutations: {
                  // 第一个参state值，第二个接收触发方法时传来的值
                    changeDanceVal(state,num) {
                        state.LifeVal = num;
                         }
                     },
        */
        this.$store.commit("changeDanceVal", LifeVal);
    }
  },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vuex解决刷新页面state数据消失的问题记录

    在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. Vuex劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. 言而总之: 实际问题:在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该

  • vuex分模块后,实现获取state的值

    问题:vuex分模块后,一个模块如何拿到其他模块的state值,调其他模块的方法? 思路: 1.通过命名空间取值--this.$store.state.car.list // OK 2.通过定义该属性的getter方法,因方法全局注册,不存在命名空间,可以通过this直接调用. this.$store.state.car.carGetter 我在car模块中自己的定义了state, getters, this.$store.state.car.list可以拿到值. 但是,this.$store.

  • 解决vue页面刷新vuex中state数据丢失的问题

    解决vue页面刷新vuex中state数据丢失的问题

    页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("store") ) { this.$store

  • vue从仓库state中取不到数据的问题

    vue从仓库state中取不到数据的问题

    目录 从仓库state中取不到数据 监听store中state数据方法 从仓库state中取不到数据 今天写项目要从仓库中取出一个值,但我一直取得是undefined,各种测试百度,然而我犯了一个低级的错误 我项目中将数据库模块化,原本为app模块,新添加user模块 我在store文件下又建立了子文件user.js,然后在index.js将其引入 然后我直接使用this.$store.state.value去取值,是取不到的,如果index.js文件里的state中也有value这个变量,该语

  • Vue项目中使用jsonp抓取跨域数据的方法

    下载jsonp npm install jsonp 在js文件夹下新增一个jsonp.js,来封装一个jsonp() 如何封装一个jsonp() 在下载的jsopn中,jsonp(url,options,callback)这个是原生jsonp方法中的参数: 引入下载的jsonp import originJsonp from 'jsonp': 导出自己定义的jsonp函数 //这个jsonp函数是我们自己定义的,与上面的originJsonp不是同一个,originJsonp是一个可以直接引用的

  • Vue 同步异步存值取值实现案例

    1.vue中各个组件之间传值 1.父子组件 父组件–>子组件,通过子组件的自定义属性:props 子组件–>父组件,通过自定义事件:this.emit(′事件名′,参数1,参数2,...); 2.非父子组件或父子组件通过数据总数Bus,this.root.$emit('事件名',参数1,参数2,-) 3.非父子组件或父子组件 更好的方式是在vue中使用vuex 方法1: 用组件之间通讯.这样写很麻烦,并且写着写着,估计自己都不知道这是啥了,很容易写晕. 方法2: 我们定义全局变量.模块a的数据

  • vue如何将v-for中的表格导出来

    一.需要安装以下依赖 npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. 三.在.vue文件中      写这两个方法:其中list是表格的内容 //export2Excel是你点击导出所绑定的方法名 export2Excel() { require.ensure([], () => { const {

  • vue使用jsonp抓取qq音乐数据的方法

    1.安装jsonp npm install jsonp 2.创建jsonp.js文件,内容如下: import originJSONP from 'jsonp' /** * 封装jsonp * @param {*} url 原始的jsonp第一个参数是url,第二个参数是option,这里为了比较好写参数做了下封装 * @param {obj} data 参数 * @param {*} option jsonp的option */ export default function jsonp (u

  • vue中实现先请求数据再渲染dom分享

    在项目中遇到了一个问题,下面是vue template中的代码: 我之前的写法是 这样做的结果是下面取dom的操作,取到的dom都是undefined,也就是没有取到. 原因是并没有按照 请求数据->渲染dom->获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不到(不理解是为什么) 后来我又把请求数据写在了created函数中,把取dom的操作写在mounted函数中,竟然还是先执行取dom的操作(是

  • vuex state中的数组变化监听实例

    前言 首先,因为我有一个需求就是vue组件中有一组多选框,选中多选框的内容,要在另一个组件中进行视图更新,这个就设计的兄弟组件之间的通信了,兄弟组件之前通信我首先选用的vuex这个解决办法. 问题 vuex的state用来放数据,我就把数组放在了vuex中,然后设置了修改的函数.最终store.js中的代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { messArray:[] } c

  • vue 实现根据data中的属性值来设置不同的样式

    style动态赋值 margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式 补充知识:vue 条件判断绑定内联样式 当需要判断条件来绑定内联样式时 可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verification ? '{backgruond:#ccc}' : $store.state.store.config.background" 以上这篇vu

  • Vue在H5 项目中使用融云进行实时个人单聊通讯

    Vue在H5 项目中使用融云进行实时个人单聊通讯

    由于其他博客的相关融云的Vue项目开发不是特别完善,此项目加入了自己的一些思考,可供大家有一点方向. 1.融云官网注册账号,创建应用并获取必要的初始化参数 appkey 2.融云web开发文档 本人使用3.x 版本 3.vue项目引入cdn(index.html) ​ 项目需求:用户当前会话列表+用户当前会话页面 // 注意在dom之前引入 <script src="https://cdn.ronghub.com/RongIMLib-3.0.0-dev.js"></s

随机推荐