组件间通信（持久化储存管理vuex）---第七节

之前我们讲组件间通信的时候，数据很多的话页面很混乱的，所以vuex的存在就解决了这一问题vuex是将要存储的数据用一个仓库进行管理，需要用的话通过vuex里面的api进行分发管理，有条理性，不管是多少个组件，数据都不会混乱，这里我通过例子的方式讲解介绍关于vuex里面重要的属性以及里面的api，主要是vue2环境下，vue3的话我会把内容和vue2一样的发布在下面，供看看，不再详细讲解，

首先安装vuex插件 执行命令  npm install vuex@3，因为vuex最新版本在vue2里面不能直接使用，所以我们在安装的时候需要指定第三版本，

安装好了之后我们新建一个store脚本文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={}
const actions={}
const mutations={}
const getters={}
const store=new Vuex.Store({
    state,
    actions,
    mutations,
    getters
})
export {store}

 在main.js

import Vue from 'vue'
import App from './App.vue'
import {store} from '@/store/index'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

引入进来了之后在new Vue实例过程中把store传进去，这样所有组件都能通过this.$store来访问store脚本里面的数据了，通过vuex里面封装的api来进行通信

做个小案例，在仓库里存放一个数据，在组件A里面通过更新仓库里面的数据，然后显示在页面上，同时在组件B里面页面呈现仓库里更新的内容，

state这个属性是专门存储数据的，所以我们把数据存放在里面，页面呈现的话也是this.$store.state.属性名   来访问，改变仓库里面的数据的话，比如点击变成999，通过事件调用store里面的commit这个api，和vuex里面的mutations对话，commit这个函数有两个参数，第一个是mutations里面的函数名，第二个参数就是要传的值，通过commit联系函数之后，mutations对应的函数也有两个参数，第一个是state，第二个是commit的第二个参数，就是值，然后通过赋值的方式改变state里面的值，

<template>
  <div>
      <h1>我是A组件vuex里面的数据是：{
  {$store.state.totnumber}}---<button &#