vue组件中数据共享——vuex

vuex是什么？

vuex是实现组件全局状态管理的一种机制，可以方便的实现组件之间的数据共享。

上图中所示的分别为传统组件之间传值和使用vuex传值的不同（图画的有点丑，将就点看吧（#￣▽￣#））

使用vuex统一管理状态的好处

（1）能够在vuex中集中管理共享的数据，易于开法和后期的维护
（2）能够高效的实现组件之间的数据共享，提高开发的效率
（3）存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

什么样的数据适合存储到vuex中

组件中共享的数据存入vuex，私有数据依旧存储在自身的data中。

安装vuex

使用npm输入以下命令进行安装
npm install vuex --save
出现以下情况，则代表安装完成

若是出现报错，如下：

则输入以下命令npm view vuex versions --json查版本，寻找适合的版本（不要最新的）

然后npm install vuex@版本号（比如3.6.2） --save根据版本下载，这样就可以了！

点击package.json文件，查看是否安装完成，如下图：

成功安装之后，在文件src下面创建一个store文件夹，在store文件夹下创建index.js文件。

成功创建之后，点开main.js文件，在最下方Vue中添加一个store这个属性，同时引入之前创建好的store文件，代码如下：

import Vue from 'vue'
import App from './App.vue'
import store from '../store'
Vue.config.productionTip = false
new Vue({
   
  store,
  render: h => h(App)
}).$mount('#app')

然后点击之前创建的store文件下的index文件，将vuex导入并安装到vue项目中，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
   
    state:{
   

    },
    mutations:{
   

    },
    actions:{
   

    }
})

使用vuex

接下来写个小demo，方便更好理解，在使用之前，先打开vue.config.js，若没有则新建一个，添加以下代码：
lintOnSave: false

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  transpileDependencies: true,
  lintOnSave: false  //避免语法检查的时候把不规范的代码(即命名不规范)当成了错误
})

随后在components文件夹下方新建两个文件，分别为Addition和Subtraction。

Addition内容为：

<template>
    <div>
        <div>add页面中count值为：</div>
        <button>+1</button>
    </div>
</template>
<script>
export default {
   
  data () {
   
    return {
   }
  }
}
</script>

Subtraction内容为：

<template>
    <div>
        <div>sub页面中count值为：</div>
        <button>-1</button>
    </div>
</template>
<script>
export default {
   
  data () {
   
    return {
   }
  }
}
</script>

App.vue中内容为：

<template>
  <div>
    <my-addition></my-addition>
    <p>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
    <my-subtraction></my-subtraction>
  </div>
</template>
<script>
import Addition from "./components/Addition.vue"
import Subtraction from "./components/Subtraction.vue"
export default {
   
  data