Vuex中常用知识点有哪些-创新互联

这篇文章给大家分享的是有关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辅助函数

感谢各位的阅读!关于“Vuex中常用知识点有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


新闻名称:Vuex中常用知识点有哪些-创新互联
当前地址:http://hbruida.cn/article/ddsgpg.html