初入前端对 VUEX 的理解

这边文章也是我看了网上视频后的理解有错不足还望提出。

vue中两个组件A和B之间没有关系只有同级的父级关系

向组件B要向组件A传值就得先通过事件的形式传给父级App.vue再由父级传给B组件（B组件用prpo接受）这样传值很麻烦。

然后我们可以用vuex（相当于一个中央仓库）就没有传给父级再传给子级那么麻烦。

接下来操作：

第一步：安装vuex

    1. D:\daima\foodanddrugsupervisionplatform> npm i vuex

    2.检查是否安装成功在package.json下查看

        

第二步：建两个组件A，B在components下分别为comA和comB

组件comA

<template>
  <div>
    <button @click="add">增加</button>
    <p>{{this.$store.state.count}}</p>
  </div>
</template>

<script>
export default {
  name: "comA",
  data(){
    return{};

  },
  methods:{
    add(){
      this.$store.commit('addCount',++this.$store.state.count)
    }
  }
}
</script>

<style scoped>

</style>

组件comB

<template>
  <div>
    <button @click="del">减少</button>
    <p>{{this.$store.state.count}}</p>
  </div>
</template>

<script>
export default {
  name: "comB",
  data(){
    return{};
  },
  methods:{
    del(){
      this.$store.commit('delCount',--this.$store.state.count)
    }
  }
}
</script>

<style scoped>

</style>

第三步：将创建好的两个组件显示在页面上（我这里为节约时间直接在APP.vue里引入的）

App.vue

<template>
<div id="app">
<comA/>
<comB/>
</div>
</template>
<script>
import comA from "@/components/comA";
import comB from "@/components/comB";
export default {
name:'App',
components:{
comA,
comB
},
}
</script>

网页显示

第四步：创建中间库

中间仓库图解

在src下创建store.js中央仓库具体内容如下

//第一步：导入vue和vuex
import Vue from "vue";
import Vuex from "vuex";
//第二步:使用插件
Vue.use(Vuex);
//第三步:实例化Vuex.stors
let store = new Vuex.Store({
//    存储数据
    state:{
        count:1
    },
//    修改逻辑
    mutations:{
        addCount(state,arg){
            state.count = arg
        },
        delCount(state,arg){
            state.count = arg
        }
    }
})
//第四步：暴露出去
export default store

最后的展示效果：