vue 状态管理vuex action 用法

index.js

import { createStore } from "vuex";

const store=createStore({

    state:{

        count:100

    },

    getters:{

        compower(state){

            return (id)=>state.count*id

        }

    },

    mutations:{

        add(state,n) {

            state.count+=n

       }

    },

    actions:{

        incre (context,n) {

            context.commit('add',n)

          }

    },

    modules:{}

})

export default store

 

app.vue

<script>

  export default {

    methods: {

      increment(t){

            // 在组件中通过commit触发mutations中的函数

            this.$store.commit("add",8)

        },

      incre(b){

            // 在组件中通过commit触发mutations中的函数

            this.$store.dispatch("incre",b)

        }

    }

  }

</script>

<template>

  <div>

    <h1>APP</h1>

    <router-link to="/home">home</router-link> |

    <router-link to="/about">about</router-link> |

    <router-link to="/move">move</router-link>

  </div>

<p>{{ $store.state.count }}</p> <br>

<p>{{ $store.getters.compower(5)}}</p><br>

<button @click="incre(8)">++</button>

  <router-view></router-view>

</template>

<style scoped>

</style>