码迷,mamicode.com
首页 > 其他好文 > 详细

关于vuex

时间:2018-06-19 16:23:56      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:date   就是   一个   组件   incr   包含   仓库   应用层   计算属性   

vuex就是使用一个store对象包含所有的应用层级状态(所有数据的来源)。
 
store 的四个属性:state, getters, mutations, actions 。
分解如下:
1、State(仓库):就是存放的变量的,放在state={}对象里。可以使用 mapState 辅助函数帮助我们生成计算属性。
换句话说,整个APP的数据就是存放在state对象里,随取随用。
 
2.getters上简单来说就是存放一些公共函数供组件调用。需要对store中的数据进行处理,或者进行重复使用,getters可以理解为vue的计算属性。
getters获取store当中的数据作予组件使用,但是这个属性我在项目中不是特别常用。我一般都是这样获取
computed: {
      ...mapGetters([
           ‘testDate‘
       ])
}
 
例子:
let store = new Vuex.Store({   
     state: {
       testData: 123
    },
    getters: {       
          dateCount(state, getters) {
                let date = state.testDate;
                return `data+1`;
            }
   }
});
 
或者
let { mapGetters } from ‘Vuex‘;
let comonent = {        
     computed: {
          ...mapGetters([
               ‘testDate‘
           ])
      }
};
 
 
注:actions使用store.commit方法触发mutations改变state
 
3.在vuex不能直接对state进行操作,所以需要提交mutation,mutation类似于vue的method事件。调用的时候有所差距,需要使用commit。所以 mutations 上存放的一般就是我们要改变 state 的一些方法。
每一个 mutation 都有一个字符串的事件类型和一个回调函数,通常在回调函数里进行操作,
store.commit(‘increment‘)
我们可以把mutations理解为“用于改变state状态的一系列方法”。在vuex的概念里,state仅能通过mutation修改,这样的好处是能够更直观清晰地集中管理应用的状态,而不是把数据扔得到处都是。
 
4.mutation 像事件注册,需要相应的触发条件。而 Action 就那个管理触发条件的。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,
因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
actions的两个方法负责把数据分发到store中供mutation使用
 
 

关于vuex

标签:date   就是   一个   组件   incr   包含   仓库   应用层   计算属性   

原文地址:https://www.cnblogs.com/zhouqiaoyun/p/9198623.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!