在vue專案裡面使用vuex

2021-10-22 15:53:20 字數 1622 閱讀 9247

安裝成功之後在 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裡面控制...