這里記錄一下vuex的使用和vuex的簡易實現
首先創建對應的store目錄和對應的入口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的插件
- 開發階段開啟strict嚴格模式
- 配置初始的state
- 配置對應的getters
- 配置對應的mutations 無副作用的函數更新
- 配置actions在此做異步處理
- 最后配置模塊
- 模塊中配置：
const state = {}
const getters = {}
const mutations = {}
const actions = {}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
配置模塊命名空間namespaced:true 導入store時的模塊名
使用的時候
可以 通過一些對應的vuex提供的方法把store中的對應屬性和方法拿到組件中
vue父子通信
或者就是自定義 組件的 v-model
非父子組件：Event Bus
我們可以使用一個非常簡單的 Event Bus 來解決這個問題：
還有一種需要注意的，外部props轉換為內部state
name: "ArticleMeta",
props: {
article: {
type: Object,
required: true
},
user: {
type: Object
}
},
data () {
return {
currentArticle: this.article, isDelete: false
}
},
以上就是vuex的使用和簡易實現的詳細內容，更多關于vuex的使用和實現的資料請關注服務器之家其它相關文章！
原文鏈接：https://segmentfault.com/a/1190000038855473
