状态管理中心 Vuex (基础用法)

        由于在创建项目的时候，已经选择了store，所以项目默认安装了。检查手动安装视频，发现其实手动新建几个文档，再手动安装一下store也可以实现。

      变化如下：

store-> index.js 

包括几个重要的模块：变量State，方法Mutations，异步方法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: {
  }
})

 router中的index.js，改了入口路由，由Parent组件进入

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组件，通过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>

或者，在Parent.vue组件中，通过mapState获取

如果还想用本地的computed，可以用...把mapState展开到外部（将mapState想象成一个对象）

<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>

操作store下的参数：绑定方法，方法内执行this.$store.commit('add’)

<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>

也可以用mapMutations， 成功

<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>