标签：Vue mutations state increment commit 全局变量 Vuex store

Vue总结第六天：Vuex （全局变量管理~多个页面共享数据）

 

目录

一、Vuex (全局变量管理~~多个页面共享数据)

✿ 更详细的可以看官网：开始 | Vuex

1、什么是Vuex？

2、核心概念：

(1) state：保存共享的状态（全局变量）

(2) getters（类似计算属性）

(3) mutations：(类似于事件注册) Vuex的store状态的更新唯一方式：提交Mutation

    1）Mutation主要包括两部分：

    2）使用：

    3）提交载荷（Payload）：就是mutations回调函数的参数（可以是基本变量，也可以是对象）：

   4）提交风格：

   5）使用常量替代 Mutation 事件类型：

   6）在组件中提交 Mutation（简化方法的调用代码）：使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用

(4) actions（异步操作）：actions提交的对象是 mutation，而不是直接变更状态state：

   1）Action 函数有一个与 store 实例具有相同方法和属性的 context 对象，

   2） Action作用：

   3） 使用：

   4）提交载荷（Payload）---actions和mutations的回调函数的参数：

   5）Action返回Promise对象，将异步操作后的结果返回给vue实例method中定义分发的函数。

   6）在组件中分发 Action（简化方法的调用代码）： mapActions 辅助函数将组件的 methods 映射为 store.dispatch

(5) modules（模块化）：

 

 

　　　　　　一、Vuex (全局变量管理~~多个页面共享数据)

　　　　　　　　　　　✿ 更详细的可以看官网：https://vuex.vuejs.org/zh/guide/

 

 

 

 

 

 

const store = new Vuex.Store({
  state: {
      count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

//提交mutations
this.$store.commit('increment', 10)

vue 实例中定义的method方法中：通过 this.$store.commit('increment'),
 其中这个 'increment' 就是咱定义在store的mutitions中的回调函数名

//注册increment事件
mutations: {
  increment (state, n) {
    state.count += n
  }
}

//提交mutations
this.$store.commit('increment', 10)

//注册increment事件
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

//提交mutations
this.$store.commit('increment', {
  amount: 10
})

 

 

 

 

//注册一个increment的action，并通过context提交个mutations
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
//写法一：直接书写context对象    
    increment (context) {
      context.commit('increment')
    }
//写法二：直接书写context对象需要用到的属性或方法    
    increment ({commit}) {
      commit('increment')
    }
  }
})

this.$store.dispatch('increment');

 

 

 

 

 

标签：Vue,mutations,state,increment,commit,全局变量,Vuex,store
来源： https://www.cnblogs.com/shan333/p/15736952.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。