Vuex基础知识-state及mutation

Vuex 

vuex 状态管理模式 ---- 全局统一集中式管理全局变量.

使用场景 跨组件通信

 eventBus 也是可以做到的跨组件通信的 但是不如vuex 方便.

像图片中 如果是父子结构的组件调用内容  可以用父子组件传值(之前写过文章 不再赘述)

而如果是 侄子和叔叔传值呢?

那么就用到vuex了

 

这五项需要先理解语义 之后我们会讲

yarn add vuex

 首先安装这个vuex包

然后

vue create vuex-demo

 初始化脚手架 

然后清空欢迎页面和logo  这些我就不具体描述了

|-components
|---AddItem.vue
|---SubItem.vue
|-App.vue

components 内创建 AddItem.vue 和 SubItem.vue 

 App.vue

<template>
  <div id="app">
    <h1>根组件</h1>
    <span>库存总数:</span>
    <input type="text">
    <div style="border:1px solid black; width: 300px;">
      <AddItem></AddItem>
    </div>
    <hr>
    <div style="border:1px solid black; width: 300px;">
      <SubItem></SubItem>
    </div>
  </div>
</template>

<script>
import AddItem from '@/components/AddItem'
import SubItem from '@/components/SubItem'
export default {
  components: {
    AddItem,
    SubItem
  }
}
</script>

<style>
#app {
  width: 300px;
  margin: 20px auto;
  border:1px solid #ccc;
  padding:4px;
}
</style>

AddItem.vue

<template>
  <div>
      <h3>AddItem组件