vuex模块化使用的一些笔记

重新复习了一下vuex的使用，记下一点笔记。

四个状态就不多说了，记一些关于模块的用法。

1.有一点值得注意，模块定义变量的时候不加namespaced:true的话，会有命名冲突，store是不会具体分到哪个模块的，这点要牢记。

2.定义模块可以这样定义，

（1）const state = { .... }; const getters = {...}; .... 导出时候分命名空间 export default {

namespaced:true，

state,

getters

...

}

也可以这样

（2） const cart = {

namespaced: true  //别忘记命名空间哦

state: { ... }, getters:{ ... },.....

}

export default cart

最后一步，记得在store的index.js文件中引入哦，import cart from './modules/cart'

export default new Vuex.Store({

.....

modules:{

    cart,

    goods

  }

});

3.组件中使用store里面数据的方式，

第一种，基于计算属性的

count() {

return this.$store.state.cart.count;

}

 这个可以通过组件的计算属性，还有一种是通过mapGetters函数，

...mapGetters({

      count:'cart/count'

    }),这个记得要在组件脚本前引入import { mapGetters } from 'vuex'

还有cart模块的getters里要返回计算的属性 

count(state) {

  return state.count;

}

第二种，在组件脚本前引入import { mapState } from 'vuex',再通过函数形式直接使用

...mapState({

      count: state => state.cart.count；//这样使用可以自己定义名字。

    })

还有一点是  ...mapActions({

      add:'cart/add'

    })

当然上面的使用方法还可以这样  ...mapActions({

'cart',['add']

    })

比较灵活