vue獲取或者改變vuex中的值方式
更新時間：2022年09月02日 14:27:34 作者：miao_zz
這篇文章主要介紹了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觸發(fā)actions里的方法，Action 提交的是 mutation，而不是直接變更狀態(tài)，Action 可以包含任意異步操作
this.$store.commit("logout");//等同于==》this.logout()；commit觸發(fā)mutations里的方法，更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 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>
監(jiān)聽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)好！！重要的來了，就是在頭部組件里面寫監(jiān)聽事件，監(jiān)聽用戶名改變時，隨著變化
watch:{
'$store.state.userName':function(){ //監(jiān)聽vuex中userName變化而改變header里面的值
this.userName=this.$store.state.userName;
}
},這樣就可以實現(xiàn)在其他頁面改變用戶名達到實時變化
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了vue可用于拖動排序組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vant steps流程圖的圖標使用slot自定義方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了vue頁面不能根據路徑進行跳轉的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
這篇文章主要介紹了vue中使用/deep/失效的解決辦法,使用了css預處理器，則可以使用/deep/， 如果/deep/ 無效，則使用 ::v-deep，本文給大家講解的非常詳細需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關于vue打開新窗口并實現(xiàn)傳參的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要介紹了vue項目登錄成功拿到令牌跳轉失敗401無登錄信息的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了NUXT SSR初級入門筆記(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要為大家詳細介紹了vue+elementui實現(xiàn)拖住滑塊拼圖驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
解決ElementUI組件中el-upload上傳圖片不顯示問題
這篇文章主要介紹了解決ElementUI組件中el-upload上傳圖片不顯示問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了avue實現(xiàn)自定義搜索欄及清空搜索事件的實踐，主要包括對搜索欄進行自定義，并通過按鈕實現(xiàn)折疊搜索欄效果，具有一定的參考價值，感興趣的可以了解一下2021-12-12