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