Vuex

Problems with one-way data flow:

  • Multiple views depend on the same state

  • Behavior from different views needs to change the uniform state

—-Vuex was born —-

The idea behind Vuex is to decouple the state shared by components and manage it in a global singleton pattern by defining and isolating concepts in state management and enforcing rules to maintain independence between views and states

Actions: Handles asynchronous operations

Mutations open the door for simultaneous operations

Both of these are things that were created to use DevTools, and to make it easier for developers to debug during development, state must be modified in both ways to be tracked in DevTools

General in the application of unified state management for example:

  • User login status, user name, profile picture, and location information
  • A collection of goods, items in a shopping cart, etc

A, the state

Single state tree, global only one

state = {
  key1: value1,
  key2: value2
}
Copy the code

In the Composition API, you get properties in State, which must be computed if you want to be responsive

//option API
computed: {
count(){
 return store.state.count
}
}
//composition API
let cnt = computed(() = > store.state.count)
Copy the code

When a component needs to fetch multiple states, it can be cumbersome to declare all properties as computed properties. You can use the mapState function map to help you get computed properties

// userId and count are attributes in state
computed: {// Use the same name as the state attribute. Use userId and count to access the array. mapState(['userId'.'count']),
    // Use u1 and u2 to access the object. mapState({u1:'userId'.u2:'count'})},Copy the code

Second, the getters

Getters is a calculated property. It can take two parameters, state and getters. If you want to pass it other parameters, you need to return a function, which is accessed by a method

/ / a parameter
getters: {
  powerCnt(state){
        returnstate.count*state.count; }}/ / two parameters
getters: {
  powerCnt2(The state, getters){
        return getters.powerCnt+1; }}// Returns a function through the getter, which can be passed as an argument, i.e. accessed through a method
getters: {
  powerCnt(state){
        return cnt= > {
          cnt*4; }}}// When called, use store.getters. PowerCnt (CNT)
store.getters.powerCnt(14)/ / 14 * 4 = 56
Copy the code

There are also mapGetters helper functions, which are used in the same way as mapState

Third, mutation

The only way to change the state in Vuex’s store is to commit mutation (asynchronously using action), which is similar to events. Each mutation has a string of event type and a callback handler, which is where we actually did the state change. The mutation accepts two parameters: state and payload

In fact, the event type is generally equivalent to the method name. A separate retro-types. ts file can be created to define the required event type, that is, innovation two is used to replace mutation event type, as follows:

export const SET_TOKEN = "setToken"
export const SET_USERID = "setUserId"
export const INCREMENT = "increment"
export const DECREMENT = "decrement"
Copy the code

Payload, generally, is an object

Specifically, there are two methods of submission

//mutatios.ts
import {INCREMENT} from "./mutations-types";
import store from "./index";

export default {
    
    [INCREMENT](state:any.payload:any){ state.count = state.count + payload.count; }},// called in the component
function do1() {
  		// Use normal mode
      store.commit(INCREMENT,{count:15});
  		
  		// Object style commit, usually using object commit
      store.commit({
        type: INCREMENT,
        count: 10})}Copy the code

When an object-style commit is used, the whole object is passed to payload, meaning that the type attribute is also in it, but the function in mutation.

Action and Module will be added later