前谈Vuex

1Vuex是什么？？

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

2.什么样的数据要存储到vuex

一般情况下，只有组件之间共享的数据，采用必要存储到vuex

3.使用vuex的好处:

可以Vuex中集中管理共享的数据，易于后期的开发和维护

能够高效实现组件之间的数据共享，提高代码的效率

存储在vuex的数据是响应式的，可以保持数据和页面同步

4.导入vuex,创建store 对象

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

创建组件：使用 this.$store.state.count

<template>
    <div>
  
  <h3>当前最新的count的值为:{{this.$store.state.count }}</h3>
  <button>+1</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              
            }
        },
        
    }
</script>

<style lang="scss" scoped>

</style>

在app.vue引入

<template>
  <div>
    <my-add></my-add>
<p>----------------</p>

  <my-sub></my-sub>
  </div>
</template>

<script>
import Add from './components/Add.vue'
import Sub from './components/Sub.vue'

  export default {
    data() {
      return {
        
      }
    },
    //注册为app的子组件
    components :{
     'my-add':Add,
      'my-sub':Sub

    }
    
  }
</script>

<style lang="scss" scoped>

</style>

组件访问state中数据的第二种方式 ： mapState

<template>
    <div>
  
  <h3>当前最新的count的值为:{{count}}</h3>
  <button>-1</button>
    </div>
</template>

<script>
//导入函数mapState
import {mapState} from  'vuex'
    export default {
        data() {
            return {
              
            }
        },
        //定义计算属性
        computed:{
            // ...展开运算符，吧全局里面的数据，映射为当前组件的计算属性
           ...mapState(['count'])  //需要使用全局哪个数据，把名称放入数组 
        }
        
    }
</script>

<style lang="scss" scoped>

</style>

效果图: