vue 獲取及修改store.js里的公共變量實(shí)例
html
<input type='text' :value='num'> <button @click='add'> + </botton>
js
data(){ return{ } }, methods:{ add(){ this.$store.commit('add',1) } }, computed:{ num:function(){ // 因?yàn)橐鲂薷?num 的值 所以放在 計(jì)算屬性里 return this.$store.state.num } }
store.js
state: { num:0 }, mutations: { add(state,shuzi){ // shuzi是js里傳來(lái)的值 1 state.num+shuzi } },
原理:
更改store中state狀態(tài)的唯一方法就是提交mutation,就很類似事件。每個(gè)mutation都有一個(gè)字符串類型的事件類型和一個(gè)回調(diào)函數(shù),我們需要改變state的值就要在回調(diào)函數(shù)中改變。我們要執(zhí)行這個(gè)回調(diào)函數(shù),那么我們需要執(zhí)行一個(gè)相應(yīng)的調(diào)用方法:store.commit。
以上這篇vue 獲取及修改store.js里的公共變量實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue項(xiàng)目運(yùn)行npm run serve報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行npm run serve報(bào)錯(cuò)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10vue-cli3.0+element-ui上傳組件el-upload的使用
這篇文章主要介紹了vue-cli3.0+element-ui上傳組件el-upload的使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12vue computed無(wú)法得到this的屬性或方法的解決
這篇文章主要介紹了vue computed無(wú)法得到this的屬性或方法的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Vue CLI4.0 webpack配置屬性之productionSourceMap用法
這篇文章主要介紹了Vue CLI4.0 webpack配置屬性之productionSourceMap用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06解決vue 局部過(guò)濾器獲取不到this的問(wèn)題
這篇文章主要介紹了解決vue 局部過(guò)濾器獲取不到this的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01vue的圖片需要用require的方式進(jìn)行引入問(wèn)題
這篇文章主要介紹了vue的圖片需要用require的方式進(jìn)行引入問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03