vue獲取或者改變vuex中的值方式
vue獲取或改變vuex的值
store–>index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { isLogin:localStorage.getItem("isLogin")?localStorage.getItem("isLogin"):false,//判斷是否登錄 }, mutations: { //判斷是否登錄 setLogin(state,payload){ state.isLogin=payload localStorage.setItem("isLogin",state.isLogin) }, //退出登錄 logout(state){ console.log("[退出登錄]",state) state.isLogin=false localStorage.clear();//清除本地緩存 } }, actions: { getLogin(context,payload){ context.commit("setLogin",payload) } }, modules: { } })
在頁面中使用或者修改vuex中的值
<script> import { mapState, mapActions,mapMutations } from "vuex" export default { name:"index", data() { return { } }, computed:{ ...mapState({ isLogin:state=>state.isLogin }),//等同於==>...mapState(['isLogin']);映射 this.isLogin 為 this.$store.state.isLogin }, mounted(){ console.log("[mapState]",this.isLogin) this.$store.state.isLogin;//等同於==》this.isLogin this.$store.dispatch("getLogin",true);//等同於==》this.getLogin(true);dispatch觸發actions裡的方法,Action 提交的是 mutation,而不是直接變更狀態,Action 可以包含任意異步操作 this.$store.commit("logout");//等同於==》this.logout();commit觸發mutations裡的方法,更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation console.log(this.$store.state.isLogin) console.log(localStorage.getItem("isLogin")) }, methods:{ ...mapMutations(["logout"]),// 將 `this.logout()` 映射為 `this.$store.commit('logout')` ...mapActions(["getLogin"]),// 將 `this.getLogin()` 映射為 `this.$store.dispatch('getLogin')` } } </script>
監聽vuex值變化實時改變
問題如圖
頭部是一個組件,想在這個頁面修改用戶名點擊確認修改後,頭部名稱跟到變化。
思路
用戶名在登錄成功過後,存在vuex裡面並且保存在本地(防止刷新消失)
this.$store.commit('set_userName',res.data.data.username)
vuex中state.js :
userName:localStorage.getItem('userName') ? localStorage.getItem('userName') : '',
mutations.js
set_mobile(state,mobile){ state.mobile=mobile localStorage.setItem('mobile', mobile); },
要取用戶名就用
this.$store.state.userName;
要存用戶名就用
this.$store.commit('set_userName',this.newName)
好!!重要的來瞭,就是在頭部組件裡面寫監聽事件,監聽用戶名改變時,隨著變化
watch:{ '$store.state.userName':function(){ //監聽vuex中userName變化而改變header裡面的值 this.userName=this.$store.state.userName; } },
這樣就可以實現在其他頁面改變用戶名達到實時變化
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。