vue-store

一.小型项目应用

Vue.observable 实现简单store管理

具体详解https://www.jianshu.com/p/25ff4b6d5bbc

store

state mutations getter,actions

• state ：对数据的全局存储
• getter： 可以理解为computed ，对数据进行计算
• mutations ：对数据的同步更改
• actions：对数据的异步更改

	mounted: {
   
        console.log(this.$store);
        /*payLoad 所有的参数对象 {a:aa,b:bb}*/
        /*调用mutation方法*/
        this.$store.commit("mutationsFun", payLoad)
           
        /*调用action 方法*/
        this.$store.dispatch("ActionsFun",payLoad)
    },
    computed: {
   
        counter() {
   
            return this.$store.state.count;
        }
    }

辅助函数

• 引入

import {
   
   mapState,
   mapGetter,
   mapMutation,
   mapAction
}

• 使用

[
  computed: {
   
      ...mapState(['count']) /*映射同名的对象：count */
      ...mapState({
   
          counter: 'count' /*映射不同名字的对象：count--->counter */
      })
      ...mapState({
   
          counter: (state) => state.count /*映射不同名字的对象：count--->counter */
      })
      ...mapGetters(["fullName"])