您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“怎么解決vuex刷新?tīng)顟B(tài)初始化”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么解決vuex刷新?tīng)顟B(tài)初始化”這篇文章吧。
vuex五種基本對(duì)象
state:存儲(chǔ)狀態(tài)(變量)
getters:對(duì)數(shù)據(jù)獲取之前的再次編譯,可以理解為state的計(jì)算屬性。我們?cè)诮M件中使用$sotre.getters.fun()
mutations:修改狀態(tài),并且是同步的。在組件中使用$store.commit('',params)。這個(gè)和我們組件中的自定義事件類(lèi)似。
actions:異步操作。在組件中使用是$store.dispath('')
modules:store的子模塊,為了開(kāi)發(fā)大型項(xiàng)目,方便狀態(tài)管理而使用的。這里我們就不解釋了,用起來(lái)和上面的一樣。
npm install vuex -S // 安裝vuex
src/store/index.js
import Vue from 'vue' import Vuex from 'vuex' import temp from '@/store/modules/temp' Vue.use( Vuex ); // 掛載在vue const store = new Vuex.Store({ modules: { temp, }, state: { }, getters: { }, mutations: { }, }); export default store; // 拋出
src/store/modules/temp.js
const Storage = sessionStorage const tempInfo = { state: { // 設(shè)置全局訪問(wèn)的state對(duì)象 tempData: Storage['SET_TEMP_DATA'] ? JSON.parse(Storage['SET_TEMP_DATA']) : {}, // 設(shè)置初始化的值(Storage中是否存在,存在則獲取,不存在則默認(rèn)賦值{}) }, mutations: { // 自定義改變state初始值的方法,這里面的參數(shù)除了state之外還可以再傳額外的參數(shù)(變量或?qū)ο?; SET_TEMP_DATA(state, tempData) { state.tempData = tempData }, }, actions: { SetData({ commit }, tempData) { commit('SET_TEMP_DATA', tempData); // 同步操作 Storage.setItem('SET_TEMP_DATA', JSON.stringify(tempData)) } }, getters: { // 實(shí)時(shí)監(jiān)聽(tīng)state值得變化(最新?tīng)顟B(tài)) tempData: (state) => { return state.tempData } } } export default tempInfo;
main.js
import Vue from 'vue' import App from './App' import router from './router' import store from '@/store/index' //vuex 狀態(tài)管理 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, // 使用store components: { App }, template: '<App/>' })
src/index.vue
<template> <div class="move-forward"> <div @click="click">點(diǎn)擊改變vuex值</div> </template> <script> export default { methods: { click() { let aa = this.$store.getters.tempData.aaa*1 this.$store.dispatch('SetData', {"aaa": aa += 1}) }, } } </script>
其他
當(dāng)然還可以使用vuex-persistedstate、vuex-along等這些第三方插件。
npm i -S vuex-persistedstate或npm i -S vuex-along
import Vue from 'vue' import Vuex from 'vuex' import temp from '@/store/modules/temp' import createPersistedSatte from 'vuex-persistedstate' // 引入 Vue.use( Vuex ); const store = new Vuex.Store({ modules: { temp, }, state: { }, getters: { }, mutations: { }, plugins: [createPersistedSatte()], // 掛載插件 }); export default store
以上是“怎么解決vuex刷新?tīng)顟B(tài)初始化”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。