vuex的使用和簡易實(shí)現(xiàn)
更新時間：2021年01月07日 10:42:21 作者：Charon
這篇文章主要介紹了vuex的使用和簡易實(shí)現(xiàn)，幫助大家更好的理解和使用vuex，感興趣的朋友可以了解下
這里記錄一下vuex的使用和vuex的簡易實(shí)現(xiàn)
首先創(chuàng)建對應(yīng)的store目錄和對應(yīng)的入口index.js
import Vue from 'vue'
import Vuex from 'vuex'
import products from './modules/products'
import cart from './modules/cart'
Vue.use(Vuex)
export default new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
state: {
count: 0,
msg: 'Hello Vuex'
},
getters: {
reverseMsg (state) {
return state.msg.split('').reverse().join('')
}
},
mutations: {
increate (state, payload) {
state.count += payload
}
},
actions: {
increateAsync (context, payload) {
setTimeout(() => {
context.commit('increate', payload)
}, 2000)
}
},
modules: {
products,
cart
}
})
- 首先注冊vuex的插件
- 開發(fā)階段開啟strict嚴(yán)格模式
- 配置初始的state
- 配置對應(yīng)的getters
- 配置對應(yīng)的mutations 無副作用的函數(shù)更新
- 配置actions在此做異步處理
- 最后配置模塊
- 模塊中配置：
const state = {}
const getters = {}
const mutations = {}
const actions = {}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
配置模塊命名空間namespaced:true 導(dǎo)入store時的模塊名
使用的時候
可以 通過一些對應(yīng)的vuex提供的方法把store中的對應(yīng)屬性和方法拿到組件中
vue父子通信
或者就是自定義 組件的 v-model
非父子組件：Event Bus
我們可以使用一個非常簡單的 Event Bus 來解決這個問題：
還有一種需要注意的，外部props轉(zhuǎn)換為內(nèi)部state
name: 'ArticleMeta',
props: {
article: {
type: Object,
required: true
},
user: {
type: Object
}
},
data () {
return {
currentArticle: this.article, isDelete: false
}
},
以上就是vuex的使用和簡易實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于vuex的使用和實(shí)現(xiàn)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vant如何自定義組件適配iphone底部安全區(qū)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請求
之前給大家介紹了jQuery利用最優(yōu)雅的方式寫ajax請求的相關(guān)內(nèi)容，這篇文章主要給大家介紹了關(guān)于axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-12-12
這篇文章主要介紹了在vue中動態(tài)修改css其中一個屬性值操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
Vue系列：通過vue-router如何傳遞參數(shù)示例
本篇文章主要介紹了Vue系列：通過vue-router如何傳遞參數(shù)示例，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
這篇文章主要介紹了Vue.js輪播圖走馬燈，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
查看vue-cli腳手架的版本號和vue真實(shí)版本號及詳細(xì)操作命令
本文給大家分享如何查看vue-cli腳手架的版本號和vue真實(shí)版本號及詳細(xì)操作過程，本文給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-11-11
vue3安裝vant實(shí)現(xiàn)按需引入和全局引入
本文主要介紹了vue3安裝vant實(shí)現(xiàn)按需引入和全局引入，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue項(xiàng)目發(fā)布有緩存正式環(huán)境不更新的解決方案
vue項(xiàng)目每次發(fā)布新版本后,測試人員都要強(qiáng)制刷新才能更新瀏覽器代碼來驗(yàn)證bug,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目發(fā)布有緩存正式環(huán)境不更新的解決方案,需要的朋友可以參考下2024-03-03
Vue.js組件使用props傳遞數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了Vue.js組件使用props傳遞數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
elementui源碼學(xué)習(xí)之仿寫一個el-divider組件
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)之仿寫一個el-divider組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08