Vue--vuex：组件的取值，值的操作

这里的取值方式只针对对 vuex 里面数据的拿取，不关注在vuex里面进行了什么操作；同理,操作值是字面上对 vuex 数据逻辑的简单处理；主要是在组件中如何去使用 vuex 的几个核心；

实例化 vuex

import Vue from 'vue';
import Vuex from 'vuex';

//注册vuex
Vue.use(Vuex);

//实例化vuex
export default new Vuex.Store({
  state: {
    num: 1,
  },
  getters: {
    outdata(state) {
      return state.num + '加了getters';
    }
  },
  mutations: {
　　// 接受两个参数，state：上边的数据，payload：数据载荷，需要传入的数据
    one(state，payload) {
      state.num +=payload
    }
  },
  actions: {
    two({ commit }) {
      commit('one');
    }
  },
});

取值方式

----State----

插值表达式获取：{{ $store.state.数据名 }}

  <div class="comp-test">
    <p>{{ $store.state.num }}</p>
    <p>{{ $store.state.模块后的路径名.num }}</p>
  </div>

使用 computed 属性计算：返回 this.$store.state.数据名

export default {
  data() {
    return {};
  },
  computed: {
    number() {
      return this.$store.state.num;
      return this.$store.state.模块后的路径名.num;
    },
  },
};
</script>    

辅助函数---mapState，使用 computed 属性计算

数组写法：...mapState（[ ‘数据名1’ ，‘数据名2’]）；

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(['num']),
    ...mapState([‘模块化后的路径名’，'num']),
  },
};

对象写法：...mapState（{  自定义的数据名：（state）=>（state.vuex中的数据名）  }）；

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
          newNum: (state) => state.num,       
    }),
    ...mapState({
          newNum: (state) => state.模块后的路径名.num,       
    }),
  },
};

 

----Getters----

插值表达式获取：{{ $store.geeters.fnname }}　　// fname 是指 vuex实例中 Getters 中的函数名

  <div class="comp-test">
    <p>{{ $store.getters.outdata }}</p>
    <p>{{ $store.getters.模块后的路径名.outdata }}</p>
  </div>

使用 computed 属性计算：返回 this.$store.geeters.fnname　　// fname 是指 vuex实例中 Getters 中的函数名

export default {
  data() {
    return {};
  },
  computed: {
    number() {
      return this.$store.getters.outdata;
      return this.$store.getters.模块后的路径名.outdata;
    },
  },
};
</script>   

辅助函数---mapGetters，使用 computed 属性计算

数组写法：...mapGetters（[ ‘数据名1’ ，‘数据名2’]）；

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(['outdata']),
    ...mapGetters([‘模块化后的路径名’，'outdata']),
  },
};

对象写法：...mapGetters（{  自定义的数据名：{  type：数据名，payload：载荷参数 }  }）；

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
         newName: 'outdata'      
    })
  },
};    

 

操作值的方式

----Mutations----

直接在组件中操作（不建议使用）：this.$store.state.数据名　　// 直接操作数据，未通过 Mutation

export default {
  data() {
    return {};
  },
  methods: {
     add(){
          this.$store.state.num++     
    })
  },
}; 

写在 methods 操作：this.$store.commit（fnname）　　// fnname 是指在 vuex实例中 Mutations 中的函数名

export default {
  data() {
    return {};
  },
  methods: {
     add(){
          this.$store.commit('one')
    })
  },
}; 

辅助函数---mapMuation，都作为方法使用；

数组写法：  ...mapMuations（[  fnname ]）；　　// fnname 是指在 vuex实例中 Mutations 中的函数名

export default {
  data() {
    return {};
  },
  methods: {
     add(){
            ...mapMutations(['one']),
    })
  },
}; 

对象写法：对象写法：   ...mapMuations（{  自定义方法名 {  type：vuex中方法名，payload：params  }  }）；

export default {
  data() {
    return {};
  },
  methods: {
     add(){
          ...mapMutations({
               newName: {
                   type: 'one',
                   payload: 1,
               },
          }),
    })
  },
}; 

----Actions----

在组件中作为方法操作：this.$store.dispatch（fnname）　　// fnname 是指在 vuex实例中 Actions 中的函数名

export default {
  data() {
    return {};
  },
  methods: {
     add(){
         this.$store.dispatch('two');
    })
  },
}; 

辅助函数---mapActions ，都作为方法使用；

数组写法：  ...mapActions （[  fnname ]）；　　// fnname 是指在 vuex实例中 Actions 中的函数名

export default {
  data() {
    return {};
  },
  methods: {
     add(){
            ...mapActions(['two']),
    })
  },
}; 

对象写法：对象写法：   ...mapActions （{  自定义方法名 {  type：vuex中方法名，payload：params  }  }）；

export default {
  data() {
    return {};
  },
  methods: {
     add(){
          ...mapActions({
               newName: {
                   type: 'two',
               },
          }),
    })
  },
};