vue 獲取及修改store.js里的公共變量實(shí)例

更新時(shí)間：2019年11月06日 10:47:39 作者：jokren

今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

html

<input type='text' :value='num'>
<button @click='add'> + </botton>

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里傳來的值 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í)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE寫一個(gè)簡單的表格實(shí)例
在本篇文章里小編給大家整理的是關(guān)于VUE中表格的寫法實(shí)例以及相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們可以參考下。
2019-08-08
uni-app中App與webview雙向?qū)崟r(shí)通信詳細(xì)代碼示例
在移動(dòng)應(yīng)用開發(fā)中,uni-app是一個(gè)非常流行的框架,它允許開發(fā)者使用一套代碼庫構(gòu)建多端應(yīng)用,包括H5、小程序、App等,這篇文章主要給大家介紹了關(guān)于uni-app中App與webview雙向?qū)崟r(shí)通信的相關(guān)資料,需要的朋友可以參考下
2024-07-07
vue中的錨點(diǎn)定位問題
這篇文章主要介紹了vue中的錨點(diǎn)定位問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
簡單聊聊Vue中的ref,toRef與toRefs
這篇文章主要是想和大家來簡單聊聊Vue中的ref、toRef、toRefs這三個(gè)函數(shù)的使用與區(qū)別，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2023-04-04
vue封裝tree組件實(shí)現(xiàn)搜索功能
本文主要介紹了vue封裝tree組件實(shí)現(xiàn)搜索功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Ant Design Pro 之 ProTable使用操作
這篇文章主要介紹了Ant Design Pro 之 ProTable使用操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue cli中env的使用指南
眾所周知，一個(gè)項(xiàng)目在開發(fā)、測試與生產(chǎn)環(huán)境的各種配置變量是不一樣的，但在vue cli 3中通過指令vue create xxx創(chuàng)建的項(xiàng)目取消了默認(rèn)的 config 和 build 文件夾，這導(dǎo)致剛?cè)胧值男』锇椴恢涝谀膬号渲铆h(huán)境變量，不過官方也提供了相應(yīng)的配置方法，本文就來介紹一下
2021-08-08
vue中4個(gè)自定義指令講解及實(shí)例用法
在本篇文章里小編給大家整理了一篇關(guān)于vue中4個(gè)自定義指令講解及實(shí)例用法，有興趣的朋友們可以跟著學(xué)習(xí)下。
2021-12-12
vue文件使用iconfont解析
這篇文章主要介紹了vue文件使用iconfont解析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于axios在vue中的使用
這篇文章主要介紹了關(guān)于axios在vue中的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03