LC

Vue-vuex

 
  • 2021年 08月01日
  • 0 阅读

这里的取值方式只针对对 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 中的函数名 ```html

{{ $store.getters.outdata }}

{{ $store.getters.模块后的路径名.outdata }}

使用 computed 属性计算：返回 this.$store.geeters.fnname　　// fname 是指 vuex实例中 Getters 中的函数名
```javascript
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',
               },
          }),
    })
  },
};
搜索