Notes from vuex in VUe3

1. What is Vuex?

• Vuex is a state management mode developed for vue.js
• Vuex solves the problem of data sharing between different components
• Vuex can persist data in components
• Several core concepts of Vuex: State Getters Mutations Actions Modules next.vuex.vuejs.org/

2. Basic use of Vuex

• Install dependency: NPM install vuex@next –save
• Create a vuex folder in the SRC directory, and create store.js in the folder
• Write code in store.js

import { createStore} from 'vuex'

const store = createStore({
  state() {
    return {
        count: 1
    }
  },
  mutations: {
    increment(state) {
      state.count ++
    }
  }
})
export default store;
Copy the code

• Js /main.ts hangs in vuex

import store from './vuex/store'
app.use(store)
Copy the code

• Use state in the home.vue component

<template> <div class="home"> {{count}} </div> </template> Or use this.$store.state.count computed: {count() {return this.$store.state.count}} // The second way to get state: mapState import { mapState} from 'vuex' computed: { ... MapState (['count'])}, if you need to modify the value of a variable, write it in the following format: computed: {... MapState ({aaa: (state) => {state.count}})}, // The third way to get state is to add store to the component and use store.state.countCopy the code

• Change the count in state in home.vue, and use mutations, requiring commit

<template> <div class="home"> {{count}} <button @click="incCount"> </button> </div> </template> methods: { incCount() { this.$store.commit('increment') } }Copy the code

• The getters vuex

A getter is similar to a computed property. The return value of a getter is cached based on its dependency and is re-evaluated only when its dependency value changes

– Store. Js defines getters

const store = createStore({
  state() {
    return {
        count: 1,
        msg: 'hello world'
    }
  },
  mutations: {
    increment(state) {
      state.count ++
    }
  },
  getters: {
      reverseMsg: state=> {
          return state.msg.reverse()
      }
  }
})
Copy the code

– Access the getter in home. vue

<template> <div class="home"> {{revMsg}} </div> </template> // The first way to access the getter // The second way to access the getter {revMsg() {return this.$store.getters. ReverseMsg}} // A third way to access the getter import {mapGetters} from 'vuex' computed: {... mapGetters(['revMsg']) },Copy the code

• The Actions of vuex
  • Action is similar to mutation, except that:
  • The Action commits mutation rather than a direct state change.
  • Actions can contain any asynchronous operation.

  – Defines actions in store.js

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
Copy the code

-Home.vue distributes actions through store.dispatch

$store. Dispatch ('increment') $store. Dispatch ('increment') $store. MapActions (['increment', // Map 'this.increment()' to 'this.$store.dispatch('increment')']),... MapActions ({add: 'increment' // map 'this.add()' to 'this.$store.dispatch('increment')'})}Copy the code

• The Module of vuex

All application states are defined in the Store, which makes it bulky. Module solves this problem and makes the code more visible

1. Define the module, such as user. Js new. Js written inside the state, getters, mutations, actions, etc

2. Store.js introduces defined Modole

3. Use the following methods

this.$store.news.count
this.$store.user.count
this.$store.commit('reverseMsg')
Copy the code

• Vux is used in the composite API

import {useStore}  from 'vuex'
export default defineComponent({
    setup(){
        const store = useStore
    }
})
Copy the code