VueX插件 --- 共享数据的读写处理

vueX: vue插件,处理组件之间共享数据的读 && 写

• 引入demo(就一个Count组件,加法计算)

  ### Count.vue(基础的写死版)
  <template>
  	<div>
  		<h1>当前求和为 ???</h1>
  		<select>
  			<option value="1">1</option>
  			<option value="2">2</option>
  			<option value="3">3</option>
  		</select>
  		<button type="button">+</button>
  		<button type="button">-</button>
  		<button type="button">求和为奇数再加</button>
  		<button type="button">等一等再加</button>
  	</div>
  	
  </template>
  
  <script>
  	export default {
  		name:'Count',
  	}
  </script>
  
  <style>
  	button {
  		margin-left: 5px;
  	}
  </style>
  
  

• 现在使用纯vue来实现

  <template>
  	<div>
  		<h1>当前求和为{{sum}}</h1>
  		<!--v-model用来收集用户输入的值,并转换为Number,否则会出现字符串数字拼接,计算结果异常-->
  		<select v-model.number="n"> <!--number修饰符-->
  			<option value="1">1</option>
  			<option value="2">2</option>
  			<option value="3">3</option>
  		</select>
  		<button type="button" @click="increment">+</button>
  		<button type="button" @click="decrement">-</button>
  		<button type="button" @click="incrementOdd">求和为奇数再加</button>
  		<button type="button" @click="incrementWait">等一等再加</button>
  	</div>
  	
  </template>
  
  <script>
  	export default {
  		name:'Count',
  		data(){
  			return {
  				sum:0,
  				n:1
  			}
  		},
  		methods:{
  			increment(){ // 求和
  				this.sum += this.n
  			},
  			decrement(){ // 自减
  				this.sum -= this.n
  			},
  			incrementOdd(){ // 奇书
  				if(this.sum % 2){
  					this.sum += this.n
  				}
  			},
  			incrementWait(){ // 计时器等一等
  				setTimeout(()=>{
  					this.sum += this.n
  				},1000)
  			},
  		}
  		
  	}
  </script>
  
  <style>
  	button {
  		margin-left: 5px;
  	}
  </style>
  
  

• vueX原理图解

• 注意事项

  - Actions 有时候可以pass,即不是必须项(需要和后端交互的时候就必须)