位置: IT常識 - 正文
Vuex(vuex數(shù)據(jù)持久化)
編輯：rootadmin推薦整理分享Vuex(vuex數(shù)據(jù)持久化)，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。
文章相關(guān)熱門搜索詞:vuex詳解和用法,vue下載,vuex是什么,vuex是什么,vuex的五個屬性及使用方法,vuex和pinia的區(qū)別,vuex和pinia的區(qū)別,vuex詳解和用法,內(nèi)容如對您有幫助，希望把文章鏈接給更多的朋友！
?在Vue中實現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個Vue插件，對vue應(yīng)用中多個組件的共享狀態(tài)進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。
我們先來看看用全局事件總線實現(xiàn)多組件共享數(shù)據(jù)的方式：
vuex實現(xiàn)
2.vuex原理圖3.何時使用？?多個組件需要共享數(shù)據(jù)時
4.搭建vuex環(huán)境安裝vuexnpm i vuex@3
創(chuàng)建文件：src/store/index.js該文件用于創(chuàng)建vuex中最為核心的store
//引入Vue核心庫import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//應(yīng)用Vuex插件Vue.use(Vuex)//準備actions對象——用于響應(yīng)組件中用戶的動作const actions = {}//準備mutations對象——用于修改state中的數(shù)據(jù)const mutations = {}//準備state對象——用于保存具體的數(shù)據(jù)const state = {}//創(chuàng)建并暴露storeexport default new Vuex.Store({actions,mutations,state})在main.js中創(chuàng)建vm時傳入store配置項
......//引入storeimport store from './store'......//創(chuàng)建vmnew Vue({el:'#app',render: h => h(App),store})5.基本使用初始化數(shù)據(jù)、配置actions、配置mutations，操作文件store.js
//引入Vue核心庫import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//引用VuexVue.use(Vuex)const actions = { //響應(yīng)組件中加的動作jia(context,value){// console.log('actions中的jia被調(diào)用了',miniStore,value)context.commit('JIA',value)},}const mutations = { //執(zhí)行加JIA(state,value){// console.log('mutations中的JIA被調(diào)用了',state,value)state.sum += value}}//初始化數(shù)據(jù)const state = { sum:0}//創(chuàng)建并暴露storeexport default new Vuex.Store({actions,mutations,state,})組件中讀取vuex中的數(shù)據(jù)：$store.state.sum
組件中修改vuex中的數(shù)據(jù)：this.$store.dispatch('action中的方法名',數(shù)據(jù)) 或 this.$store.commit('mutations中的方法名',數(shù)據(jù))
備注：若沒有網(wǎng)絡(luò)請求或其他業(yè)務(wù)邏輯，組件中也可以越過actions，即不寫dispatch，直接編寫commit
6.getters的使用概念：當state中的數(shù)據(jù)需要經(jīng)過加工后再使用時，可以使用getters加工。
在store.js中追加getters配置
......const getters = { // bigSum有一個參數(shù)就是statebigSum(state){return state.sum * 10 // 返回什么bigSum就是什么值}}//創(chuàng)建并暴露storeexport default new Vuex.Store({......getters})組件中讀取數(shù)據(jù)：$store.getters.bigSum
7.四個map方法的使用導(dǎo)入四個mapimport {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
mapState方法：用于幫助我們映射state中的數(shù)據(jù)為計算屬性
computed: { //借助mapState生成計算屬性：sum、school、subject（對象寫法） ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成計算屬性：sum、school、subject（數(shù)組寫法） ...mapState(['sum','school','subject']),},mapGetters方法：用于幫助我們映射getters中的數(shù)據(jù)為計算屬性
computed: { //借助mapGetters生成計算屬性：bigSum（對象寫法） ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成計算屬性：bigSum（數(shù)組寫法） ...mapGetters(['bigSum'])},mapActions方法：用于幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數(shù)
methods:{ //靠mapActions生成：incrementOdd、incrementWait（對象形式） ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠mapActions生成：incrementOdd、incrementWait（數(shù)組形式） ...mapActions(['jiaOdd','jiaWait'])}mapMutations方法：用于幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數(shù)
methods:{ //靠mapActions生成：increment、decrement（對象形式） ...mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成：JIA、JIAN（對象形式） ...mapMutations(['JIA','JIAN']),}備注：mapActions與mapMutations使用時，若需要傳遞參數(shù)需要：在模板中綁定事件時傳遞好參數(shù)，否則參數(shù)是事件對象。
8.模塊化+命名空間目的：讓代碼更好維護，讓多種數(shù)據(jù)分類更加明確。
修改store.js
const countAbout = { namespaced:true,//開啟命名空間 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } }}const personAbout = { namespaced:true,//開啟命名空間 state:{ ... }, mutations: { ... }, actions: { ... }}const store = new Vuex.Store({ modules: { countAbout, personAbout }})開啟命名空間后，組件中讀取state數(shù)據(jù)：
//方式一：自己直接讀取this.$store.state.personAbout.list//方式二：借助mapState讀?。?..mapState('countAbout',['sum','school','subject']),開啟命名空間后，組件中讀取getters數(shù)據(jù)：
//方式一：自己直接讀取this.$store.getters['personAbout/firstPersonName']//方式二：借助mapGetters讀?。?..mapGetters('countAbout',['bigSum'])開啟命名空間后，組件中調(diào)用dispatch
//方式一：自己直接dispatchthis.$store.dispatch('personAbout/addPersonWang',person)//方式二：借助mapActions：...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})開啟命名空間后，組件中調(diào)用commit
//方式一：自己直接committhis.$store.commit('personAbout/ADD_PERSON',person)//方式二：借助mapMutations：...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),上一篇：織夢dedecms手機版?zhèn)戊o態(tài)教程(織夢手機端)
下一篇：公司員工私車公用如何做會計分錄？(公司員工私車公用協(xié)議)
