zoukankan      html  css  js  c++  java
  • 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:必须接受两个值,不然毫无意义
  • 相关阅读:
    第十二周作业
    第十二周上机练习
    第十一周作业
    第十一周上机练习
    第十周上机作业
    第九周上机练习
    第八周作业
    软件测试第一次作业
    Jsp第二次作业
    JSP第一次作业
  • 原文地址:https://www.cnblogs.com/pythonywy/p/11442914.html
Copyright © 2011-2022 走看看