1. Method of obtaining data from VUEX in VUE2

<template>
  <div>
    <h2>{{ $store.state.counter }}</h2>
    <h2>{{ sCounter }}</h2>
    <h2>{{ sName }}</h2>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  
  export default {
    computed: {
      Method 1: Pass in an array object
      / /... mapState(["counter", "name", "age", "height"])
      Method 2: Pass in the function object. mapState({sCounter: state= > state.counter,
        sName: state= > state.name
      })
    }
  }
</script>
Copy the code

2. Method of obtaining data from VUEX in VUe3

<template>
  <div>
    <h2>{{ $store.state.counter }}</h2>
    <h2>{{ $store.state.name }}</h2>
    <h2>{{ sCounter }}</h2>
    <h2>{{ sName }}</h2>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed } from "vue";

export default {
  setup() {
    const store = useStore();
    const sCounter = computed(() = > store.state.counter);
    const sName = computed(() = > store.state.name);
    return{ sCounter, sName, }; }},;</script>
Copy the code

3. Compare the function object passed in mapState in VUe2

Through the… The mapState({() => {}}) method returns function objects one by one, and vue3 uses vuex to wrap a callback function around a computed callback function. Is this similar to vue2 using mapState? With that in mind, let’s see if we can get the return value of mapState by iterating through it and recycling it around a computed function.

<template>
  <div>
    <h2>{{ $store.state.counter }}</h2>
    <h2>{{ $store.state.name }}</h2>
    <h2>{{ counter }}</h2>
    <h2>{{ name }}</h2>
  </div>
</template>

<script>
import { mapState, useStore } from "vuex";
import { computed } from "vue";

export default {
  setup() {
    const store = useStore();
    const storeStateFns = mapState(["counter"."name"]);
    const storeState = {};
    Object.keys(storeStateFns).forEach((fnKey) = > {
      console.log(storeStateFns[fnKey]);
      Read properties of undefined (reading '$store') so you need to manually bind this to the method here
      const fn = storeStateFns[fnKey].bind({ $store: store });
      storeState[fnKey] = computed(fn);
    });
    return{... storeState, }; }};</script>
Copy the code

At this point, you can see a simple prototype instead of having to write a computed function every time you get a piece of data in vuEX. The next task is to encapsulate it as a utility function.

4. Encapsulate as a utility function

import { computed } from 'vue'
import { mapState, useStore } from 'vuex'

export function useState(mapper) {
  / / get a store
  const store = useStore()

  // Get the corresponding object's functions
  const storeStateFns = mapState(mapper)

  // Convert the data
  const storeState = {}
  Object.keys(storeStateFns).forEach(fnKey= > {
    const fn = storeStateFns[fnKey].bind({$store: store})
    storeState[fnKey] = computed(fn)
  })
  return storeState
}
Copy the code

Using it in vue3 becomes very similar to using mapState

setup() {
  const storeState = useState(["counter"."name"])
  return {
    ...storeState
  }
}
Copy the code

5. To summarize

This is where the simple useState hooks are implemented, which can also be wrapped with useGetters hooks, which can also be wrapped as a way to get state in compatible modules.