MIGO生產訂單入庫寫入批次特性增強
Vuex是什麼
概念:專門在Vue中實現集中式狀態(資料)管理的一個Vue外掛【比如將想學習的學生集中到一起,只講授一次課】,對vue應用中多個元件的共享狀態進行集中式的管理(讀/寫),也是一種元件間通訊的方式,且適用於任意元件間通訊。
備註:執行npmivuex
main.js
//引入Vue import Vue from 'vue' //引入App import App from './App.vue' //引入store import store from './store' //關閉Vue的生產提示 Vue.config.productionTip = false //建立vm new Vue({ el:'#app', render: h => h(App), store, beforeCreate() { Vue.prototype.$bus = this } })
index.js(/src/store目錄下)
//該檔案用於建立Vuex中最為核心的store import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //應用Vuex外掛 Vue.use(Vuex) //準備actions——用於響應元件中的動作 const actions = { /* jia(context,value){ console.log('actions中的jia被呼叫了') context.commit('JIA',value) }, jian(context,value){ console.log('actions中的jian被呼叫了') context.commit('JIAN',value) },*/
jiaOdd(context,value){ console.log('actions中的jiaOdd被呼叫了') if(context.state.sum % 2){ context.commit('JIA',value) } }, jiaWait(context,value){ console.log('actions中的jiaWait被呼叫了') setTimeout(()=>{ context.commit('JIA',value) },500) } } //準備mutations——用於操作資料(state) const mutations = { JIA(state,value){ console.log('mutations中的JIA被呼叫了') state.sum += value }, JIAN(state,value){ console.log('mutations中的JIAN被呼叫了') state.sum -= value } } //準備state——用於儲存資料 const state = { sum:0 //當前的和 } //建立並暴露store export default new Vuex.Store({ actions, mutations, state, })
Count.vue
<template> <div> <h1>當前求和為:{{$store.state.sum}}</h1> <select v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="increment">+</button> <button @click="decrement">-</button> <button @click="incrementOdd">當前求和為奇數再加</button> <button @click="incrementWait">等一等再加</button> </div> </template> <script> export default { name:'Count', data() { return { n:1, //使用者選擇的數字 } }, methods: { increment(){ this.$store.commit('JIA',this.n) }, decrement(){ this.$store.commit('JIAN',this.n) }, incrementOdd(){ this.$store.dispatch('jiaOdd',this.n) }, incrementWait(){ this.$store.dispatch('jiaWait',this.n) }, }, mounted() { console.log('Count',this) }, } </script> <style lang="css"> button{ margin-left: 5px; } </style>
//該檔案用於建立Vuex中最為核心的storeimport Vue from 'vue'//引入Vueximport Vuex from 'vuex'//應用Vuex外掛Vue.use(Vuex)
//準備actions——用於響應元件中的動作const actions = {/* jia(context,value){console.log('actions中的jia被呼叫了')context.commit('JIA',value)},jian(context,value){console.log('actions中的jian被呼叫了')context.commit('JIAN',value)}, */jiaOdd(context,value){console.log('actions中的jiaOdd被呼叫了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被呼叫了')setTimeout(()=>{context.commit('JIA',value)},500)}}//準備mutations——用於操作資料(state)const mutations = {JIA(state,value){console.log('mutations中的JIA被呼叫了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被呼叫了')state.sum -= value}}//準備state——用於儲存資料const state = {sum:0 //當前的和}
//建立並暴露storeexport default new Vuex.Store({actions,mutations,state,})