vue 状态管理vuex action 用法

标签：count vue incre mutations state action commit vuex store

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>

标签：count,vue,incre,mutations,state,action,commit,vuex,store
From： https://www.cnblogs.com/96net/p/18014893