资讯专栏INFORMATION COLUMN

Vuex 升级入坑小记

ziwenxie / 2778人阅读

摘要:升级入坑小记场景描述引入的版本为,开启调试工具默认升级后可以调试。遂升级,发现大量使用失效,报,的中文文档,没有及时更新。机票订单和用户信息。

Vuex 升级入坑小记 场景描述

引入Vuex的版本为0.3,开启调试工具默认升级后可以调试Vuex。给作者一个大大的赞。为提高开发体验也是操碎了心 (๑•̀ㅂ•́)و✧ (8。安利下(Vue Devtools)。

Vue Devtools 只支持了v0.5+。遂升级Vuex,发现大量Vuex使用失效,报vuex actions undefined,Vuex的中文文档,没有及时更新。英文文档Api的改动已经同步文档。

关于Vuex 接口升级的说明 https://github.com/vuejs/vuex/issues/54

升级

升级Vuex以后的写法和route的方式类似

import Vue from "vue"
import Vuex from "vuex"
import store from "./store"
import MyComponent from "./MyComponent"

// important, teaches Vue components how to
// handle Vuex-related options
Vue.use(Vuex)

var app = new Vue({
    el: "#app",
    // provide the store using the "store" option.
    // this will inject the store instance to all child components.
    store,
    components: {
       MyComponent
    }
});

应用store数据的方式:

export default {
    computed: {
        data () {
             return this.$store.state.data
           }
    },
      methods {
          doSomething () {
              ...
              this.$store.dispatch("MUTATIONS", arguments);
              ...
        }
    }
};

升级后的直观感受,this.$store的方式取值 和 调用actions更方便了。

Vuex改善开发体验之处

引入Vue-route Vue才算正儿八经开发SPA了。Vue-route 的使命是不断切换,组件树。虽然子组件可以复用,但是不能共享数据,View切换父组件的生命周期结束,随之子组件的生命周期结束。子组件的数据随之清空。在特定场景需要一些数据持久化。官方给了一些例子 https://github.com/vuejs/vuex/tree/master/examples

我的项目中适合用Vuex的地方:1持久化用户信息。2机票订单和用户信息。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78995.html

相关文章

  • 是,入坑小记

    摘要:种一颗树最好的时机是十年前,其次是现在经过一段刻骨的升本历程,来到了西华大学。计划是前进的路线图免除对于以后学习的各自夸大的计划,从实际出发找到适合自己的前进的路线图。今年我岁,年轻。 种一颗树最好的时机是十年前,其次是现在 经过一段刻骨的升本历程,来到了西华大学。明显能感觉到自己又有了新的...

    CoXie 评论0 收藏0
  • Vue入坑笔记

    摘要:近段时间常使用开发,写点记录,避免时间久之忘了。安装教程查看是否已安装,在中输入若已安装则输出版本号。继承报错可能是文件路径问题。当和继承的不同时在文件夹内外的话,会出现该错误。 近段时间常使用vue-cli开发,写点记录,避免时间久之忘了。 环境 1. nodejs  vue-cli开发基于nodejs环境,确保开发的环境中已安装了nodejs。  安装教程 https://www....

    superw 评论0 收藏0
  • 一个JAVA WEB伪全栈的VUE入坑随笔:从登录开始(VUEX

    摘要:此文章用于记录本人学习历程,有共同爱好者可加好友一起分享。从上周天,由于本周有公司篮球比赛,所以耽误两天晚上,耗时三个晚上勉强做了一个登录功能。这里的用户信息和登录状态都是直接取的中的用户信息进行属性值初始化。 此文章用于记录本人VUE学习历程,有共同爱好者可加好友一起分享。从上周天,由于本周有公司篮球比赛,所以耽误两天晚上,耗时三个晚上勉强做了一个登录功能。中间的曲折只有自己知道,有...

    Zack 评论0 收藏0
  • 前端入坑体验与分享

    摘要:同源策略同源策略是一种约定,由公司年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到等攻击。 一、Vue变化检测 背景 初始化对象,属性未知;某些事件触发时,对象改变(新增属性),Vue监听不到 原因 Vue.js 不能检测到对象属性的添加或删除,因为Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 dat...

    hss01248 评论0 收藏0
  • gulp4.0升级小记

    摘要:前言周日在公司的新电脑在以前配置的目录按下时发现报了错,百度了一下得知原来已经到了版本,就花了一点时间去升了个级,顺便记下我个人使用到的配置文件新版本的不同点,文笔和水平有限,多多见谅新引入新引入的可替换老版的和,代码更简洁是任务监听是任务 前言 周日在公司的新电脑在以前gulp3.9配置的目录按下npm install时发现报了错,百度了一下得知原来gulp已经到了4.0版本,就花了...

    zorpan 评论0 收藏0

发表评论

0条评论

ziwenxie

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<