vue之vuex

1.安装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>

  运行 npm run dev

2. state访问状态对象

     

// 修改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>

3. Mutations触发状态

        

<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>

4.getters

//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>

5.actions

//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
})

6.module

// 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>