第1步：安裝
npm install vuex --save
第2步：新建src/store/index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
},
mutations:{
}
})
第3步：新建src/modules文件夾，新建src/modules/goods_create.js用於管理商品創建相關管理
export default {
state:{
skus_type:0,
title: "",
category: [],
desc:"",
unit:"",
stock:0,
min_stock:0,
display_stock:0,
status:0,
express:""
},
getters:{
},
mutations:{
// 修改state
vModelState(state,{key,value}){
state[key] = value
}
},
actions:{
}
}
注意：這裏mutatioins可以理解爲methods，vModelState方法中key表示傳遞的key，比如state.title。valiue表示賦值，實際上就是修改state.title的值
第4步：在src/store/index.js中引入
import Vue from 'vue'
import Vuex from 'vuex'
import goods_create from './modules/goods_create' //引入使用
Vue.use(Vuex)
export default new Vuex.Store({
// 新增
modules:{
goods_create
}
})
第5步：在create.vue組件中引入，此時已經可以拿到數據了。
computed: {
...mapState({
skus_type:state=>state.goods_create.skus_type,
title: state=>state.goods_create.title,
category: state=>state.goods_create.category,
desc:state=>state.goods_create.desc,
unit:state=>state.goods_create.unit,
stock:state=>state.goods_create.stock,
min_stock:state=>state.goods_create.min_stock,
display_stock:state=>state.goods_create.display_stock,
status:state=>state.goods_create.status,
express:state=>state.goods_create.express,
}),
// 其他計算屬性
},
個人理解：在goods_create.js中的mutations中的VModelState，在create.vue組件的中使用時，在methods中...mapMutations(['VModelState'])導入，然後便可以使用，傳值方式與goods_create.js中的mutations中的VModelState一樣，是對象{key, value}形式。