Vue 浅析Vuex五个核心部分的作用

1 Vuex核心

• 五个核心部分
  1. state
  2. mutation
  3. action
  4. getter

1.1 state

• state提供唯一的公共数据源。所有的全局共享的数据都放在Store的state里面定义。

  //创建store数据源，提供唯一公共数据
  const store = new Vue.Store({
      state:{
          count:0
      }
  })
  

• 组件访问数据

  1. 方式一：

     <p>{{this.$store.state.count}}</p>
     

  2. 方式二：

     //1、从Vuex中按需导入mapState函数
     import {mapState} from 'vuex'
     

     //2、通过mapState函数，将所需全局数据映射为当前组件的computed属性
     computed:{
         ...mapState(['count'])
     }
     

     <!--3、使用count数据-->
     <p>{{count}}</p>
     

1.2 mutation

• 变更、调用并处理state里面定义的数据，映射为computed属性。
• state里面的数据不能直接修改或设置，只能通过mutation来实现变更。
• 不能异步处理

1.3 action

• 提交mutation，间接改变数据，映射为computed属性。
• 可以异步操作

1.4 getter

• 加工state里面的数据形成新的数据。只起到包装的作用，类似于computed属性。

1.5 module

• 将store分割成各个模块，解决vuex因使用单一状态树且应用非常复杂时，应用状态集中于一个store对象而变得臃肿的现象。

2 调用数据方法

2.1 调用state里面的数据

1. 方式1：this.$store.state.count
2. 方式2：按需导入：...mapState(['count'])，直接使用count

2.2 执行mutation里面的方法

1. 方式1：this.$store.commit('add')
2. 方式2：按需导入：...mapMutation(['sub'])，直接使用sub()方法

2.3 执行action里面的异步方法

1. 方式1：this.$store.dispatch('addSync')
2. 方式2：按需导入：...mapActions(['subN'])，直接使用``subN()方法

2.4 调用getter里面的数据

1. 方式1：this.$store.getters.showNum
2. 方式2：按需导入：...mapGetters(['showNum'])，直接使用showNum