Vuex中常用知识点(总结)_编程技术_编程开发技术教程

Vuex中常用知识点(总结)_编程技术_编程开发技术教程

服务器 VIP24小时自助开通

编程技术Vuex中常用知识点(总结)_编程技术_编程开发技术教程插图

如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,下面我们就来看一下vuex中常用的一些知识点,希望对大家有一定的帮助。

一、为什么要使用Vuex

1、多个组件依赖同一个状态,使用组件之间通信方法会非常繁琐,例如多层嵌套组件。

2、需要全局保存的数据,例如用户、权限信息,全局系统设置

二、Vuex的五个核心属性

1、state:存储状态

// store.jsconst store = new Vuex.Store({
  state: {
    count: 0
  }});// 组件里获取count值$store.state.count

2、getters:state作为第一个参数,其他getters作第二个参数,返回值会根据他的依赖缓存起来,相当于Vue的计算属性

// store.jsconst store = new Vuex.Store({
  state: {
    count: 1,
    sum: 2
  },
  getters: {
    getCountAndSum: (state,getters) => {
      return state.count + state.sum;
    }
  }});// 其他组件获取getter$store.getters.getCountAndSum

3、mutations:修改状态(同步的),state 作为第一个参数,提交载荷作为第二个参数

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  }});// 其他组件调用mutations的方法$store.commit('increment', {n: 100});

4、actions:异步操作(执行mutations的方法,不是直变更状态)

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  },
  actions: {
    increment (context) {
      context.commit('increment');
    }
  }});// 其他组件调用actions的方法$store.dispatch('increment');

5、modules:store的子模块

const a = {
  state: {
    count: 0
  },
  getters: {
    getCount2 (state, getters, rootState) {
      return state.count + 2;
    }
  },
  mutations: {
    increment (state, getters, rootState) {
      state.count++;  
    }
  },
  actions: {
    increment (context) {
      // context.state.count;
      // context.rootState.count;
      context.commit('increment');
    }
  }};const b = {};const store = new Vuex.Store({
  modules: {
     a,
     b  }});// 其他组件调用 (获取state的变量需要加上引入的module的别名)$store.state.a$store.state.b

三、Vuex辅助函数

<template>
  <div class="about">
    <h1>count: <span>{{count}}</span></h1>
    <h1>getCount: <span>{{$store.getters.getCount}}</span></h1>
    <h1>sum: <span>{{sum}}</span></h1>
    <h1>getSum: <span>{{$store.getters.getSum}}</span></h1>
    <button @click="clickB">test    </button>
  </div></template><script>import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'; 
export default {
  name: 'about',
  data () {
    return {
      count: 0,
      sum: 0
    }
  },
  computed: {
    ...mapState({
      count: state => state.count,
      countAlias: 'count',
      countPlusLocalState (state) {
        return state.count + this.localCount;
      }
    }),
    ...mapGetters([
      'getCount', 'getSum'
    ])
  },
  mounted () {
    this.count = this.$store.state.count;
    this.sum = this.$store.state.a.sum;

  },
  methods:{
    ...mapMutations(
      'add','addO'
    ),
    ...mapActions([
      'add','addO'
    ]),
    clickB () {
      this.$store.dispatch('add');
      this.$store.dispatch('addO');
    }
  }
}</script>

更多编程相关知识,请访问:编程入门“>编程入门!!

Vuex中常用知识点(总结)
—–文章转载自PHP中文网如有侵权请联系admin#tyuanma.cn删除

php如何判断文件夹是否存在,不存在则创建

分享到 :
服务器 VIP24小时自助开通
相关推荐

vue表格表头首行固定代码

vue表格表头首行固定代码一款自适应浏览器vue表格实例,动态设置表格数据,表格数[...

Vue-select下拉框组件实例

Vue-select下拉框组件实例基于Vue的select下拉框组件,自定义下拉框[...

浅谈vue中axios的封装_亿码酷站_亿码酷站

浅谈vue中axios的封装_亿码酷站_亿码酷站

Vue中computed和method之间有什么不同点_编程技术_亿码酷站

Vue中computed和method之间有什么不同点_编程技术_亿码酷站