一、Vuex了解，附带调用方法

 

 

-------------------------------------------------------------------------------------------------------------------------------- 

state:{ 数据 }

    1.this.$store.state.数据名称

    2.computed:{
        ...mapState(['数据'])
      }

mutations:{ 方法 }

    1.this.$store.commit('方法'，参数)

    2.methods: {
        ...mapMutations(["addCounter"])
      }

actions:{ 异步函数 }

    1.this.$store.dispatch(方法，参数)

    2.methods: {
        ...mapActions(["addCounter"])
      }
    

getters:{ 计算属性 }

    1.this.$store.getters.()

    2.computed:{
        ...mapGetters(['数据'])
      }
​
    // vuex
    getters:{
        changeData (context) {
            context.commit('increment')
        }
    }

module:{ 模块化 }

特殊的this调用方法

this.$store.dispatch('user/方法')

this['user/方法'].()

建议第三种

createNamespacedHelpers方法

    {
        // 模块 user
        user:{
            namespaced : true, // 开启命名空间
            state:{},
            mutations:{}
        }
    }
    
    // 默认的模块化是全局，开启模块化之后调用
​
    1.this.$store.dispatch('user/方法')
    2.methods: {
        ...mapActions(["user/addCounter"])
        
        // 调用Vuex模块化方法
        change(){
            this['user/方法'].()
        }
        
        // 特别注意这里的 this 调用方法
        `this['user/方法'].()`
        
      }
    3.
    // 1.导入createNamespacedHelpers方法，createNamespacedHelpers方法可以指定模块名称
    import { createNamespacedHelpers } from 'vuex'
    const mapGetter = createNamespacedHelpers('user')
    
    computed:{
        ...mapGetter(['name'])
    }
    

模块化的命名空间

模块：{

state：{ }

}

state调用

a.this.$store.模块.数据

b.

      // 可以实现，模块的state全局调用  和全局state调用一样
      主 getters：{
          数据名：state => { state.模块名.数据 }
      }