This is the third day of my participation in the August Text Challenge.More challenges in August

Components start to do nothing:

① Components are stored regardless of data

② Components do not care about data update

③ Components ignore data requests

Now all the $prefix methods and attributes we used:

Refs, refs, refs, event, store, store, store, Router, emit(), emit(), emit(), delete()

This is written on the same class that all components inherit from (.vue) files. Note that we can’t explicitly see the class it inherits from (React can tell that any component inherits from react.component.ent), but there is actually an inheritance.

1. Predictable state container —- (Predictable state container)

The following code leverages the closure feature to implement a predictable state container:

<script>
function getApi(){
    var a = 0;
    return {
        getA(){
            return a;
        },
        addA(){
            a++;
        },
        cheng(n){
            if(n > 0){ a *= n; }}}}var api = getApi();
api.addA();
api.addA();
api.addA();
api.addA();
api.cheng(3);
console.log(api.getA()); / / 12
</script>
Copy the code

Now the local variable A in the function is in a predictable state, and we don’t know when it’s going to change, but we know all kinds of changes it can do. Let’s say we add 1, let’s say we multiply by a positive number.

Let’s change it:

<script>
function getApi(){
    var a = 0;
    return {
        getA(){
            return a;
        },
        commit (str){
            if(str == "JIA"){
                a++;
            }else if(str == "JIAN"){ a--; }}}}var api = getApi();
api.commit("JIA");
api.commit("JIA");
api.commit("JIA");
console.log(api.getA()); / / 3
</script>
Copy the code

2. Why Vuex?

Reason 1: App.vue is always in charge of data, which is too messy

When we did the todo case, app.vue’s data(){} said it

data(){
    return {
        todo: []}}Copy the code

When we made the atlas, app.vue’s data(){} said it

data(){    
    return {       
        info : {            
            mingxingYangmi ":",idx : 0}}}Copy the code

So far, our data has been stored in the app.vue component.

Cause 2: It is difficult to obtain data in depth

When the component hierarchy is deep, the smallest component is not convenient to directly request and modify the data.

Look at the official line:

3. Vuex installation

vuex.vuejs.org/

npm install --save vuex

Create a Stores folder and then create a store.js file that exposes a JS object:

export default {
    state : {
        a : 10
    },
    mutations : {
        JIA(state){
            state.a ++;
        },
        MINUS(state){ state.a --; }}}Copy the code

Mutations is the only way to change state!!

Even actions must change state via mutations. How to change? Commit to the mutations.

Mutations: write something that has no side effects, commit it to mutations

Actions: Write any side effects and dispatch them into actions

Change the main. Js:

import Vue from "vue";
import Vuex from "vuex";
import App from "./App";
import store from "./stores/store";
// Use plugins. We will talk about the mechanism of use later.
Vue.use(Vuex);
new Vue({
    el : "#app".render(h){
        return h(App)
    },

    // Place a store object
    store: new Vuex.Store(store)
});
Copy the code

How does the component get its value

Any component, do not need any processing, do not need any packaging, do not need any lead package, direct “ask for data”;

<h1>{{$store.state.a}}</h1>

Note that we add this.$store.state.a to the function

Use this. codestore.mit, this.$store.dispatch to change data in store.

How does the component change its value

Note that the only way to change state is to use the mutations function, which needs to be called commit. The argument in commit is a string, which is the name of the function defined in mutations, usually in all caps.

this.$store.commit("JIA")

Easy wrong points:

In the store.js file, note:

State property, not data property

Mutations is not a spring function, but directly changes state, which is a parameter that is injected by the system

export default {
// Close your own interval. True means you can add a namespace
    namespaced : true.state : {
        a : 10
    },
    mutations : {
        JIA(state){
            state.a ++;
        },
        MINUS(state){ state.a --; }}}Copy the code

7. Brush your manual

vuex.vuejs.org/zh/

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.

8 modules.

A Module is a split store, eventually merged into a single store.

Expose a store module parent store introduces registered child components used by the child component store expose module

import counterStore from "./counterStore";
export default {
    modules : {
        counterStore
    }
}
Copy the code

component

<template>
    <div>
        <h1>I'm Vue, you have to stop liking other people!!</h1>
        <h1>{{$store.state.counterStore.a}}</h1>
        <button @click="add">Add 1</button>
        <button @click="minus">Minus 1</button>
    </div>
</template>

<script>
    import Vue from "vue";
    export default {
        created(){},methods : {
            add(){
                this.$store.commit("counterStore/JIA");
            },
            minus(){
                this.$store.commit("counterStore/MINUS"); }}}</script>
Copy the code

What are side effects?

The side effects of accurate definition: en.wikipedia.org/wiki/Side_e…

Colloquially: it can produce an uncertain response, asynchronous, called “side effects.”