安裝成功之後在 vue專案的目錄建立store資料夾
在main.js檔案裡面引入store.js檔案
import vue from 'vue'
import router from './router'
import store from './store/store'
vue.config.productiontip = false
/* eslint-disable no-new */
new vue()
store.js
結構
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
const state =
const getters =
const mutations =
const actions =
export default new vuex.store()
簡單的例子
import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
const state =
// getter 用於對store中的資料進行加工處理形成新的資料,getter不會修改state裡面的原資料,
// ① getter可以對store中已有的資料加工處理之後形成新的資料,類似vue的計算屬性
// ② store 中資料發生變化,getter的資料也會跟著發生變化
const getters =
}// 用於變更store中的資料
const mutations = ,
// step:外界傳來的引數
changeaddn(state,step),
changejian(state),
changejiann(state,step),
}// 如果通過非同步操作變更資料,不惜通過action 而不能使用mutation,
// 但是在action中還是要通過出發mutation的方式間接的變更資料
const actions = ,1000)
},changeaddnasync(context,step),
changejianasync(context),1000)
},changejiannasync(context,step),1000)
}}export default new vuex.store()
使用
a.vue
當前最新的count值為:}}+1
+1 async
b.vue
當前最新的count值為:}}-1
-n-1 async
-n async
vue專案中使用vuex
import vue from vue import vuex from vuex import mutations from mutations import actions from actions import getters from getters import from utils au...
vue學習筆記六 在vue專案裡面父子元件傳值
一 父給子傳值 home.vue 父 註冊子元件myfooter,並定義params值,給子元件傳值 myfooter.vue 子 接收父傳的值,使用到props接收值。控制台輸出結果 二 子給父傳值 home.vue父在註冊子元件mychild時自定義兩個事件 incre和decre 並在增加in...
vue學習筆記 在vue專案裡面使用引入公共方法
首先新建乙個資料夾 commonfunction 然後在裡面建立 乙個檔案common.js 建立好之後,在main.js裡面引入這個公共方法 最後是呼叫這個公共方法 測試一下,我在公共方法裡面寫了乙個簡單的一段 如下 export default 1 2345 如何在我的login.vue裡面控制...