vuex的实用简单案例

什么是vuex

官网解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
其实vuex就是，用这个组件来储存我们不同vue组价的值，可以实现任意组价的页面数据共享

为什么要使用vuex？

vue是怎么实现组件数据共享

你肯定听说过父子组件，那你也应该知道，组件之家的数据共享是在父子组价中完成的。但是如果有的组价是这样的呢？

我要在组件A和B之间进行数据共享，这个利用父子组价就可以完成。
但是我现在假如有这样的一个需求，我要在B组价和F组价之间进行数据共享，按照父子组价传值的思路，我们要把B中的数据传递给A→APP→D→E→F。这样的父子组件之间传值。

vuex进行数据共享

现在如果用了vuex，你就可以按需求直接在B组件和F组件中导入vuex，这样就可以利用vuex这个媒介，进行任意界面的数据共享

怎么用

搭建vue脚手架，安装vuex依赖

npm install vuex --save

在项目目录（src）下创建store目录和store.js文件

理解store.js中store对象要包含的四个属性

state

• 介绍：提供的唯一的公共数据接口，所有共享的数据都要放到store中的state中进行存储
• 使用：

  1. import {mapState} from 'vuex'
     computed:{
     ...mapState(['count'])
     }
     
     在template中使用{{count}}，可以直接调用
     

  2. 在template中使用{{$store.state.count}}，可以直接调用

mutation

• 介绍： 提供设置存储state数据的方式

• 注意：

  • 只有通过mutation变更store中国的数据，不可以直接操作store中的数据
  • 通过这种方式虽然操作起来稍微繁琐一点，但是可以集中监控所有的数据变化

• 使用
  1.

    ```
    	   import {mapAction} from 'vuex'
    	    computed:{
    	    ...mapAction(['add'])//用mapMutations方法见add方法设为全局
    	    }
    	    在methods中可以直接调用this.add的方法
    ```
  

  2. 在methods中可以直接调用this.$store.dispatch(‘add’,3)的方法

action

• 介绍：在这里面写异步的方法
• 使用：
  1.

  import {mapMutations} from 'vuex'
  computed:{
  ...mapMutations(['add'])//用mapMutations方法见add方法设为全局
  }
  
  在methods中可以直接调用this.add的方法
  

  2. 在methods中可以直接调用this.$store.commit(‘add’,3)的方法

getter

• 介绍：不会改表states中的数据只会包装states中的数据

• 使用：

  import {mapGetters} from 'vuex'
  computed:{
  ...mapGetters(['count'])
  }
  
  在template中使用{{count}}，可以直接调用
  
  
  getter：{
      showNum(state){
          return '当前的数据是：'+state.count+''
      }
  }
  

  2. 在template中使用{{$store.getters.名称}}，可以直接调用