vuex的若干问题

1、 mutation用来同步数据做业务的处理 (vuex中store数据改变唯一的方法就是mutation),mutation不能是异步最主要的就是为了 调试,而不是不能修改状态;
2、action处理异步数据最终提交到数据库,提交的是 mutation,Action 可以包含任意异步操作,而不是直接变更状态。
3、Actions 支持同样的载荷方式和对象方式进行分发:

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

4、mapState 作用:当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余,们可以使用 mapState 辅助函数帮助我们生成计算属性,

computed: mapState({
    count: 'count', // 第一种写法
    sex: (state) => state.sex, // 第二种写法
    from: function (state) { // 用普通函数this指向vue实例,要注意
      return this.str + ':' + state.from
    },
    // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
    // from: (state) => this.str + ':' + state.from
    myCmpted: function () {
      // 这里不需要state,测试一下computed的原有用法
      return '测试' + this.str
    }
  }),
代码示例来源:闲人王昱珩 
也可以使用ES6中的扩展运算符”…”,【不知道扩展运算符的朋友可自行百度】	
	   computed:{
            ...mapState(['count','info']),
            // count(){
            //     return this.$store.state.count
            // },
            //  info(){
            //     return this.$store.state.info
            // }
    
        },

5、mapMutations/mapActions是把mutation/action函数绑定到methods里面,调里面的方法时正常传参数。
6、部署之前需要在“config/index.js/ assetsPublicPath: ‘/’ ”,里修改服务器路径配置。
7、“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算;
参数: 接受 state 作为其第一个参数;也可以接受其他 getter 作为第二个参数;
注意,getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的;getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

不断update。。。

发布了19 篇原创文章 · 获赞 11 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43392673/article/details/88024816