vuex 的基本概念

更新日期: 2017-06-17 阅读次数: 9080 分类: VueJS

在 weex 的 demo 项目 hacknews 里看到了 vuex 的使用。于是了解了一下 vuex 的基本概念。

可以将 vuex 理解为一个前端 MVC 的规范。

如果没有 vuex 世界是怎样的?

场景一:

新闻类 APP,首页需要拉取新闻列表

只需要在页面初始化时 ajax 获取新闻列表即可,获取之后给对应的变量赋值。 然后页面自动渲染。

这种情况,似乎没有 vuex 什么事情。

硬要说有什么关系的话,那就是把访问服务器的逻辑剥离出来。方便复用。(然而,这里根本复用不了。。。)

场景二:

APP 中需要登录之后,才能拉取部分数据,而这些接口都需要用到代表登录态的 token。

即,多个页面都需要获取同一个 token 数据。那么这个 token 就需要在一个公共的地方,以方便不同的页面/组件进行 get/set。

vuex store 的定义

const store = new Vuex.Store({
  state: {
  },
  actions: {
  },
  mutations: {
  },
  getters: {
  },  
  modules: {
  }
})

vuex 的流程

vuex 的流程

state

用于存储数据的数据结构,例如

state: {
	profile: {},
	version: 2
}

mutation

n. 变化,突变 mutate vt. 改变

默认 store 中的数据是 read-only 的。通过 function 才能修改,这些 functions 称之为 mutations。

const store = new Vuex.Store({ 
  state: { 
    myValue: 0
  }, 
  mutations: { 
    increment (state, value) { 
      state.myValue += value;
    }
  } 
});

// Need to update a value?
// Wrong! Don't directly change a store value.
store.myValue += 10;

// Right! Call the appropriate mutation.
store.commit('increment', 10);

需要注意的是:

mutation 中的操作,必须是同步的,这里禁止使用异步的操作。 原因是,devtool 在记录 mutation 时,会记录 mutation 前后的的 state 快照。 如果 mutation 中的操作是异步的,那么记录就没有意义了。

action

你可能会疑惑,既然有了 mutation 进行 state 操作,为何还要引入 action.

因为,mutation 只允许进行同步操作,如果需要异步操作,就需要用到 action。

定义了如何从服务器/本地存储拉取数据,并将变化 commit 到 mutation。例如,

actions: {
    LOAD_PROJECT_LIST: function ({ commit }) {
      axios.get('/secured/projects').then((response) => {
        commit('SET_PROJECT_LIST', { list: response.data })
      }, (err) => {
        console.log(err)
      })
    }
  }

为何,即使是同步的返回,action 依然要使用 Promise.resolve 进行封装?

actions in Vuex are asynchronous. The only way to let the calling function (initiator of action) to know that an action is complete - is by returning a Promise and resolving it later.

vue.js - Returning Promises from Vuex actions - Stack Overflow

getters

获取计算后的 state 中的状态,例如,拉取到的是所有新闻。 但是,如果需要获取未读新闻,就需要使用 getters

modules

对于复杂业务,可以通过 module 分成不同的 store。

参考 Modules · GitBook

参考

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式