爱学习的小强

图解

图解store>mutation-types.jsexport const INCREMENT_N = "incrementN";App.vue<template> <div class="app"> <table border="1"> <h2>{{ $store.state.counter }}</h2> <button @click="increment">+1</bu

图解hooks>useMapper.jsimport { useStore } from "vuex";import { computed } from "vue";export function useMapper(mapper, mapFunc) { const store = useStore(); const gettersFns = mapFunc(mapper); const getters = {}; Object.keys(gettersFns).forEa

图示hooks>useGetters.jsimport { mapGetters, useStore } from "vuex";import { computed } from "vue";export function useGetters(mapper) { const store = useStore(); const gettersFns = mapGetters(mapper); const getters = {}; Object.keys(gettersFn

图示Home.vue<template> <div class="home"> <table border="1"> <h2>{{ $store.getters.totalBooksPrice }}</h2> <h2>{{ $store.getters.info }}</h2> <hr /> <h2>{{ totalBooksPrice

逻辑图index.jsimport { createStore } from "vuex";export default createStore({ state() { return { counter: 10, name: "Alice", age: 19, height: 180, books: [ { name: "Alice", price: 10, count: 1 }, { name

图示hooks>useState.jsimport { useStore, mapState } from "vuex";import { computed } from "vue";export function useState(mapper) { const store = useStore(); const storeStateFns = mapState(mapper); const storeState = {}; Object.keys(storeState

视图Home.vue<template> <div class="home"> <table border="1"> <h5>{{ name }}</h5> <h5>{{ age }}</h5> <h5>{{ counter }}</h5> </table> </div></template>&