State management center Vuex (basic usage)

        Since the store has been selected when creating the project, the project is installed by default. Check the manual installation video, and found that it is actually possible to create a few files manually, and then manually install the store.

      The changes are as follows:

store-> index.js 

Including several important modules: variable State, method Mutations, asynchronous method Actions

 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0,  // 相当于data
    num:1,
  },
  getters: {
  },
  mutations: {  // 注意，函数实参为state
    add(state){
      state.count ++
    },
    decrease(state){
      state.count --
    }
  },
  actions: {
    delayAdd(context){ // 主要，函数实参为context
      setTimeout(() => {
        context.commit('add')
      }, 1000);
    }
  },
  modules: {
  }
})

 The index.js in the router has changed the entry route, which is entered by the Parent component

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  
]

const router = new VueRouter({
  routes:[
    // 学习vuex， 多定义一个路由
    {
      path:'/',
      component:() => import('../views/Parent.vue')
    },
    {
      path:'/home/:id',
      // 动态路由传参，根据name指定，需要多配置一个name
      name:'home',
      component:() => import('../views/Home.vue'),
      Children:[{
        path:'/child',
        component:() => import('../views/Child.vue')
      }]
    }
  ]
})

export default router

Parent.vue component, obtained through this.$store.state.count

<template>
    <div style="background-color: dodgerblue;">
        <!-- 读取store参数 方法一: $store.state.count -->
        <h3>Parent <span style="color: red;">{
   
   { $store.state.count }}</span></h3>
        <!-- 读取store参数 方法二: this.$store.state.count 赋值到本地 -->
        <h5>count: {
   
   { count }}</h5>
        <m-child></m-child>
    </div>
</template>

<script>

import MChild from './Child.vue'
export default {
    computed: {
        // vuex，store中维护的数据，计算给count变量
        count() {
            return this.$store.state.count
        }
    },

    data() {
        return {
            msg: 'df'
        }
    },
    components: {
        MChild,
    },
    mounted() {
        console.log(this.$store.state)
    }
}

</script>

<style></style>

Or, in the Parent.vue component, get it through mapState

If you still want to use local computed, you can use... to expand mapState to the outside (think mapState as an object)

 

<template>
    <div style="background-color: dodgerblue;">
        <h3>Parent <span style="color: red;">{
   
   { count }}</span></h3>
        <m-child></m-child>
    </div>
</template>

<script>

import MChild from './Child.vue'
import { mapState } from 'vuex' // 1. 引入mapState

// 如果有多个需要映射的，用mapstate
export default {
    // 2. 通过mapState函数，赋值
    computed: mapState({
        count:'count',
    }),

    data() {
        return {
            msg: 'df'
        }
    },
    components: {
        MChild,
    },
    mounted() {
        console.log(this.$store.state)
    }
}

</script>

<style></style>

Operate the parameters under the store: bind the method, execute this.$store.commit('add') in the method

<template>
    <div style="background-color: dodgerblue;">
        <h3>Parent <span style="color: red;">{
   
   { count }}</span></h3>
        <button @click="add">增加</button>
        <m-child></m-child>
    </div>
</template>

<script>

import MChild from './Child.vue'
import { mapState } from 'vuex' // 1. 引入mapState

// 如果有多个需要映射的，用mapstate
export default {
    // 2. 通过mapState函数，赋值
    computed: mapState({
        count:'count',
    }),

    data() {
    },
    components: {
        MChild,
    },
    methods:{
        add(){  // 触发store里的，mutation下的add函数
            this.$store.commit('add')
        }
    }
}

</script>

<style></style>

You can also use mapMutations , successfully

 

<template>
    <div style="background-color: dodgerblue;">
        <!-- 读取store参数 方法一: $store.state.count -->
        <h3>Parent <span style="color: red;">{
   
   { count }}</span></h3>
        <!-- 读取store参数 方法二: this.$store.state.count 赋值到本地 -->
        <!-- <h5>count: {
   
   { count }}</h5> -->
        <button @click="add">add</button>
        <button @click="decrease">decrease</button>
        <m-child></m-child>
    </div>
</template>

<script>

import MChild from './Child.vue'
import { mapMutations, mapState } from 'vuex'
export default {
    // computed: {
    //     // vuex，store中维护的数据，计算给count变量
    //     count() {
    //         return this.$store.state.count
    //     }
    // },

    computed:mapState({
        count:'count'
    }),

    data() {
        return {
            msg: 'df'
        }
    },

    methods:{
        ...mapMutations(['add','decrease']),   // 注意这里要用引号把函数名引起来
    },

    components: {
        MChild,
    },
    mounted() {
        console.log(this.$store.state)
    }
}

</script>

<style></style>