专栏首页python-爬虫Vue-CLI项目vuex仓库

Vue-CLI项目vuex仓库

0901自我总结

Vue-CLI项目vuex仓库

一.概念

  • vuex仓库是vue全局的数据仓库,好比一个单例,在任何组件中通过this.$store来共享这个仓库中的数据,完成跨组件间的信息交互。
  • vuex仓库中的数据,会在浏览器刷新后重置

二.使用

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        // 设置任何组件都能访问的共享数据
        course_page: ''  
    },
    mutations: {
        // 通过外界的新值来修改仓库中共享数据的值
        updateCoursePage(state, new_value) {
            console.log(state);
            console.log(new_value);
            state.course_page = new_value;
        }
    },
    actions: {}
})

仓库共享数据的获取与修改在任何组件的逻辑中

// 获取
let course_page = this.$store.state.course_page

// 直接修改
this.$store.state.course_page = '新值'

// 方法修改
this.$store.commit('updateCoursePage', '新值');

注意点:

  • updateCoursePage:必须接受两个值,不然毫无意义

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • django-分页

    from django.core.paginator import Paginator

    小小咸鱼YwY
  • 力扣题目汇总(最长连续递增序列,旋转图像(中等),宝石与石头)

    你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。

    小小咸鱼YwY
  • django2.0+连接mysql数据库迁移时候报错

    去到\python\lib\site-packages\django\db\backends\mysql\base.py"

    小小咸鱼YwY
  • java在指定目录下执行dos命令或者bat文件

    直接看源程序吧 public static void main(String[] args) throws IOException { File dir =...

    cloudskyme
  • java开发_数字转换汉语中人民币的大写_完整版

    ======================================================

    Hongten
  • 博通WiFi芯片漏洞致数十亿设备受影响,部分iPhone可遭网络窃听

    据外媒报道,赛普拉斯半导体(Cypress Semiconductor)和博通制造的WiFi芯片存在漏洞,正在使数十亿台设备容易受到攻击,包括苹果、谷歌和三星的...

    镁客网
  • 由于版本依赖造成的YUM段错误

    最近在服务器(Centos 5.3,64位)上使用YUM,总是提示 Segmentation Fault,无论执行什么命令都是如此,一时不得其解。

    大江小浪
  • vue+axios新手实践实现登陆

    其实像这类的文章网上已经有很多很好的,写这篇文章,相当于是做个笔记,以防以后忘记 用到的:1、 vuex 2、axios 3、vue-route

    前端博客 : alili.tech
  • Android查缺补漏--Service和IntentService

    Service的运行不依赖界面,即使程序被切换到后台,Service仍然能够保持正常运行。当某个应用程序进程被杀掉时,所有依赖于该进程的Service也会停止运...

    codingblock
  • 3步搞定图像盲水印?试试云开发扩展能力

    云开发不仅支持多端(微信小程序、Web应用、APP应用、QQ小程序),更提供丰富的扩展能力!

    腾讯云开发TCB

扫码关注云+社区

领取腾讯云代金券