vuex及其内部核心成员介绍及使用

vuex优点：（1）数据的存取一步到位，不需层层传递；（2）数据的流动非常清晰；（3）存储在Vuex中的数据是响应式的。用大白话说就是可以实现大范围数据共享，尤其是对于非父子关系的组件是非常友好的。

1.下载vuex包（下载时候一定要看自己是vue2还是3，根据自己的版本下载最新的，如果是Vue2，推荐使用vuex@3.6.2）

2.搭建环境

（1）在src目录下新建store文件夹，在里面新建index.js文件

（2）在index.js中进行操作：

//1.导入vuex
import Vuex from 'vuex'
import Vue from 'vue'
//2.安装插件
Vue.use(Vuex)
//3.创建store对象
const store = new Vuex.Store({

})
//4.导出store对象
export default store

(3)在main.js中做以下操作

import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/bootstrap.css'

//1.引入store对象
import store from './store'

Vue.config.productionTip = false
//2.挂到Vue对象上
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

3.各个vuex核心成员介绍及使用

（1）state（state本质是一个对象，用来存储全局共享的数据，有两种访问方式）

const store = new Vuex.Store({
    state: {
        count: 0    
    }
})

访问方式一：通过“this.$store.state.全局数据名称”来访问，如果是插值表达式，建议不加this，如下所示：

 <p>count 值：{
  { $store.state.count }}</p>

访问方式二：通过vuex提供的mapStat