状态管理工具vuex的基本使用(vuebus的理解)

男娘i 2022-09-03 03:25 121阅读 0赞

# vuex的展示图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]

# 1. vuex 的基本结构 #

const store = new Vuex.Store({ 
          state: { } //相当于 vue结构中的 data 
          getters: { }, // 相当于vue结构中的计算属性使用
          actions: { }, // 相当于vue结构中的监听属性使用
          mutations: { },//相当于vue结构中的 methods 方法集合 （其中方法第一个参数为vuex的参数，第二个为调用时传递的参数 ）
          modules:{ } // 其中客包含另一个vuex 存在，相当大的模块包
    })

## 1.1 vuex 数据持久化设置 ##

数据持久化设置:

# 2. vuex 的基本使用 #

import Vue from 'vue'
    import Vuex from 'vuex'
    import router from '@/router/router.js'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
      state: { 
        // isOpen: localStorage.getItem("EP_ADMIN_isOpen") == 'true' ? true : false,
        // isFixed: localStorage.getItem("EP_ADMIN_isFixed") == 'true' ? true : false,
        isOpen: true,
        isFixed: true,
        querylogoimg:"",
      },
      mutations: { 
        setIsOpen(state, val) { 
          state.isOpen = val
          localStorage.setItem("EP_ADMIN_isOpen", val)
        },
        setIsFixed(state, val) { 
          state.isFixed = val
          localStorage.setItem("EP_ADMIN_isFixed", val)
        },
        logocahnge(state , value){ 
          // console.log(value);
          state.querylogoimg = value
        },
      },
      actions: { },
      modules: { 
      }
    })

# 3. vuex 的页面使用 #

## 最后说下 vuex 中 的 modules ##

## 1. 取文件夹中其中一个做代表 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 1]

## 2.文件夹结构使用方式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 2]  
[vuebus使用描述推荐：https://blog.csdn.net/qq\_41630382/article/details/84100016?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522162813297116780264087097%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request\_id=162813297116780264087097&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2allsobaiduend~default-1-84100016.pc\_search\_result\_control\_group&utm\_term=vue+bus%E4%BD%BF%E7%94%A8&spm=1018.2226.3001.4187][vuebus_https_blog.csdn.net_qq_41630382_article_details_84100016_ops_request_misc_257B_2522request_255Fid_2522_253A_2522162813297116780264087097_2522_252C_2522scm_2522_253A_252220140713.130102334_2522_257D_request_id_162813297116780264087097_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2allsobaiduend_default-1-84100016.pc_search_result_control_group_utm_term_vue_bus_E4_BD_BF_E7_94_A8_spm_1018.2226.3001.4187]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]: /images/20220829/8975ae63a9b0417ea626a75aef60be5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 1]: /images/20220829/b501dc8a80f749698e844f65708bdd8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 2]: /images/20220829/f256c2c5eedc490480cf25bfef1a7566.png
[vuebus_https_blog.csdn.net_qq_41630382_article_details_84100016_ops_request_misc_257B_2522request_255Fid_2522_253A_2522162813297116780264087097_2522_252C_2522scm_2522_253A_252220140713.130102334_2522_257D_request_id_162813297116780264087097_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2allsobaiduend_default-1-84100016.pc_search_result_control_group_utm_term_vue_bus_E4_BD_BF_E7_94_A8_spm_1018.2226.3001.4187]: https://blog.csdn.net/qq_41630382/article/details/84100016?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162813297116780264087097%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162813297116780264087097&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-84100016.pc_search_result_control_group&utm_term=vue%20bus%E4%BD%BF%E7%94%A8&spm=1018.2226.3001.4187