vuex的展示圖

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 = vallocalStorage.setItem("EP_ADMIN_isOpen", val)},setIsFixed(state, val) {state.isFixed = vallocalStorage.setItem("EP_ADMIN_isFixed", val)},logocahnge(state , value){// console.log(value);state.querylogoimg = value},},actions: {},modules: {} })

3. vuex 的頁面使用

<script> import { mapMutations, mapState } from "vuex" import Api_login from "@/assets/api/login" export default {data() {return {username: '',// querylogoimg:"",Defaultlogo:require("../../assets/img/login/logo-headportrait.png"),}},computed: {...mapState([ 'isOpen', 'isFixed'])},created() {},mounted() {this.getUserInfoFun(); // 獲取登錄者用戶信息},methods: {...mapMutations(['setIsOpen', 'setIsFixed' , 'logocahnge' ]),getUserInfoFun(){// this.querylogoimg = let _this = this;// 獲取用戶信息Api_login.getUserInfo().then(res => {if (res.success) {this.username = res.result.name;// 存儲頭像圖片信息this.$store.commit('logocahnge' , res.result.avator)let jsonData = JSON.stringify(res.result);_this.$store.commit("setUserInfo", jsonData);utils.init(this);}});},} } </script>也可在 DOM 結構上使用： <img :src="$store.state.querylogoimg == null ? Defaultlogo : $store.state.querylogoimg" alt="">

最后說下 vuex 中 的 modules

1. 取文件夾中其中一個做代表

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-2_allsobaiduend~default-1-84100016.pc_search_result_control_group&utm_term=vue+bus%E4%BD%BF%E7%94%A8&spm=1018.2226.3001.4187

總結

以上是生活随笔為你收集整理的状态管理工具vuex的基本使用(vuebus的理解)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。