分分鐘學(xué)會(huì)vue中vuex的應(yīng)用（入門(mén)教程）

new Vuex.Store({})

state：{}

store.state.數(shù)據(jù)

mutations: {}

<div id="app"></div>

<template id="tpl">
 <div>
 <tip></tip>
 <but></but>
 </div>
</template>

<script>

 var store = new Vuex.Store({
 state:{
 count:0
 },
 mutations:{
 jia (state) {
 state.count++
 },
 jian (state) {
 state.count--
 }
 }
 });

 var vm = new Vue({
 el:"#app",
 template:"#tpl",
 components:{
 tip:{
 template:"<div>{{$store.state.count}}</div>"
 },
 but:{
 template:`
 <div>
 <input type="button" value="+" @click="$store.commit('jia')"/>
 <input type="button" value="-" @click="$store.commit('jian')"/> 
 </div>
 `
 }
 },
 store
 });
</script>

<script>
 //我們從store里面獲取的數(shù)據(jù)最好放到計(jì)算屬性中
 var store = new Vuex.Store({
 state:{
 count:0,
 num1:1,
 num2:2
 },
 mutations:{
 jia (state) {
 state.count++
 },
 jian (state) {
 state.count--
 }
 }
 });
 var vm = new Vue({
 el:"#app",
 template:"#tpl",
 components:{
 tip:{
 //創(chuàng)建計(jì)算屬性
 
 // computed:{
 // count(){
 // return this.$store.state.count;
 // },
 // num1(){
 // return this.$store.state.num1;
 // },
 // num2(){
 // return this.$store.state.num2;
 // }
 // },
 //使用mapState輔助函數(shù)
 //computed:Vuex.mapState({
 // count:state=>state.count,
 //num1:state=>state.num1,
 //num2:state=>state.num2
 //}),
 //mapState 傳一個(gè)字符串?dāng)?shù)組
 computed:Vuex.mapState(['count' , 'num1' , 'num2']),
 template:"<div>{{count}}{{num1}}{{num2}}</div>"
 },
 but:{
 template:`
 <div>
 <input type="button" value="+" @click="$store.commit('jia')"/>
 <input type="button" value="-" @click="$store.commit('jian')"/> 
 </div>
 `
 }
 },
 store
 });
</script>