vue之vuex

npm i vuex --save-dev

//main.js文件
import Vue from 'vue'
import store from './store'
import vuex from './vuex.vue'
 
new Vue({
  el:'#app',
  store,
  render:xx=>xx(vuex)
})
 
// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
//import Parent from './tranistion.vue'
Vue.use(Vuex) 
 
const state = {
  count:44
}
const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  }
}
export default new Vuex.Store({
  state,
  mutations
})
 
 
// vuex.vue 文件
<template>
  <div id="app">
    <h1>Hello Vuex</h1>
    <p>{{$store.state.count}}</p>
    <p>
      <button @click="$store.commit('jia')">+</button>
      <button @click="$store.commit('jian')">-</button>
    </p>
  </div>
</template>

// 修改vuex.vue
<template>
  <div id="app">
    <h1>Hello Vuex</h1>
    <p>{{$store.state.count}}  count->{{count}}</p>
    <p>
      <button @click="$store.commit('jia')">+</button>
      <button @click="$store.commit('jian')">-</button>
    </p>
  </div>
</template>
 
<script>
  import { mapState } from 'vuex'
  export default{
    name:'app',
    //computed:{
    //  count(){
    //      return this.$store.state.count+1
    //  }
    //}
    computed:mapState([
      "count"
    ])
  }
</script>

<template>
  <div id="app">
    <h1>Hello Vuex</h1>
    <p>{{$store.state.count}}  count->{{count}}</p>
    <p>
      <button @click="$store.commit('jia',{a:10})">+</button>
      <button @click="jian">-</button>
    </p>
  </div>
</template>
 
<script>
  import { mapState,mapMutations } from 'vuex'
  export default{
    name:'app',
    //computed:{
    //  count(){
    //      return this.$store.state.count+1
    //  }
    //}
    computed:mapState([
      "count"
    ]),
    methods:mapMutations([
       'jia',
       'jian'
    ])
  }
</script>

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
//import Parent from './tranistion.vue'
Vue.use(Vuex) 
 
const state = {
  count:44
}
const mutations = {
  jia(state,obj){
    console.log(obj.a);
    state.count = state.count + obj.a
  },
  jian(state){
    state.count --
  }
}
const getters = {
  count:function(state){
    return state.count += 99
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters
})
 
// vuex.vue
<template>
  <div id="app">
    <h1>Hello Vuex</h1>
    <p>{{$store.state.count}}  count->{{count}}</p>
    <p>
      <button @click="$store.commit('jia',{a:10})">+</button>
      <button @click="jian">-</button>
    </p>
  </div>
</template>
 
<script>
  import { mapState,mapMutations,mapGetters } from 'vuex'
  export default{
    name:'app',
    computed:{
      ...mapState([
        "count"
      ]),
      count(){
        return this.$store.getters
      }
    },
    methods:mapMutations([
       'jia',
       'jian'
    ])
  }
</script>

//vuex.vue
<template>
  <div id="app">
    <h1>Hello Vuex</h1>
    <p>{{$store.state.count}}  count->{{count}}</p>
    <p>
      <button @click="$store.commit('jia',{a:10})">+</button>
      <button @click="jian">-</button>
    </p>
    <p>
      <button @click="jiaplus">+plus</button>
      <button @click="jianplus">-plus</button>
    </p>
  </div>
</template>
 
<script>
  import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
  export default{
    name:'app',
    computed:{
      ...mapState([
        "count"
      ]),
      //count(){
      //  return this.$store.getters
      //}
    },
    methods:{
       ...mapMutations([
           'jia',
          'jian'
       ]),
       ...mapActions([
         'jiaplus'
       ]),
       ...mapActions({
           jianplus:'jianplus'
       })
    }
    }
</script>
 
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
//import Parent from './tranistion.vue'
Vue.use(Vuex) 
 
const state = {
  count:44
}
const mutations = {
  jia(state,obj){
    console.log(obj.a);
    state.count = state.count + obj.a
  },
  jian(state){
    state.count --
  }
}
const getters = {
  count:function(state){
    return state.count += 99
  }
}
const actions = {
  jiaplus (context){
    context.commit('jia',{a:1});
    setTimeout(()=>{
      context.commit('jian')
    },3000)
    console.log('我先被执行了')
  },
  jianplus({commit}){
    commit('jian')
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})
 

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
//import Parent from './tranistion.vue'
Vue.use(Vuex) 
 
const state = {
  count:44
}
const mutations = {
  jia(state,obj){
    console.log(obj.a);
    state.count = state.count + obj.a
  },
  jian(state){
    state.count --
  }
}
const getters = {
  count:function(state){
    return state.count += 99
  }
}
const actions = {
  jiaplus (context){
    context.commit('jia',{a:1});
    setTimeout(()=>{
      context.commit('jian')
    },3000)
    console.log('我先被执行了')
  },
  jianplus({commit}){
    commit('jian')
  }
}
const moduleA = {
  state,
  mutations,
  getters,
  actions
}
const moduleB = {
  state:{count:99}
}
export default new Vuex.Store({
  modules:{
    a:moduleA,
    b:moduleB
  }
})
 
// vuex.vue
<template>
  <div id="app">
    <h1>Hello Vuex</h1>
    <p>{{$store.state.a.count}} --- {{count}}</p>
    <!--p>{{$store.state.count}}  count->{{count}}</p-->
    <p>
      <button @click="$store.commit('jia',{a:10})">+</button>
      <button @click="jian">-</button>
    </p>
    <p>
      <button @click="jiaplus">+plus</button>
      <button @click="jianplus">-plus</button>
    </p>
  </div>
</template>
 
<script>
  import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
  export default{
    name:'app',
    computed:{
      //...mapState([
      //  "count"
      //]),
      count(){
        return this.$store.state.a.count
      }
    },
    methods:{
       ...mapMutations([
           'jia',
          'jian'
       ]),
       ...mapActions([
         'jiaplus'
       ]),
       ...mapActions({
           jianplus:'jianplus'
       })
    }
    }
</script>