vue 獲取及修改store.js里的公共變量實例
更新時間：2019年11月06日 10:47:39 作者：jokren
今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
html
<input type='text' :value='num'> <button @click='add'> + </botton>
js
data(){
return{
}
},
methods:{
add(){
this.$store.commit('add',1)
}
},
computed:{
num:function(){
// 因為要做修改 num 的值 所以放在 計算屬性里
return this.$store.state.num
}
}
store.js
state: {
num:0
},
mutations: {
add(state,shuzi){
// shuzi是js里傳來的值 1
state.num+shuzi
}
},
原理：
更改store中state狀態(tài)的唯一方法就是提交mutation，就很類似事件。每個mutation都有一個字符串類型的事件類型和一個回調(diào)函數(shù)，我們需要改變state的值就要在回調(diào)函數(shù)中改變。我們要執(zhí)行這個回調(diào)函數(shù)，那么我們需要執(zhí)行一個相應的調(diào)用方法：store.commit。
以上這篇vue 獲取及修改store.js里的公共變量實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在本篇文章里小編給大家整理的是關(guān)于VUE中表格的寫法實例以及相關(guān)知識點內(nèi)容，需要的朋友們可以參考下。2019-08-08
uni-app中App與webview雙向?qū)崟r通信詳細代碼示例
在移動應用開發(fā)中,uni-app是一個非常流行的框架,它允許開發(fā)者使用一套代碼庫構(gòu)建多端應用,包括H5、小程序、App等,這篇文章主要給大家介紹了關(guān)于uni-app中App與webview雙向?qū)崟r通信的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue中的錨點定位問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要是想和大家來簡單聊聊Vue中的ref、toRef、toRefs這三個函數(shù)的使用與區(qū)別，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-04-04
本文主要介紹了vue封裝tree組件實現(xiàn)搜索功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了Ant Design Pro 之 ProTable使用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
眾所周知，一個項目在開發(fā)、測試與生產(chǎn)環(huán)境的各種配置變量是不一樣的，但在vue cli 3中通過指令vue create xxx創(chuàng)建的項目取消了默認的 config 和 build 文件夾，這導致剛?cè)胧值男』锇椴恢涝谀膬号渲铆h(huán)境變量，不過官方也提供了相應的配置方法，本文就來介紹一下2021-08-08
在本篇文章里小編給大家整理了一篇關(guān)于vue中4個自定義指令講解及實例用法，有興趣的朋友們可以跟著學習下。2021-12-12
這篇文章主要介紹了vue文件使用iconfont解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了關(guān)于axios在vue中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03