正确理解Vuex：懂人生，就懂了Vuex

URLOS 发布于2019-08-23 16:47 / 2738人阅读

摘要：人生，远不止是钱。如何管理，一个更复杂的人生人生，就是一个大型应用。把复杂的人间，拆解成了行动与目标。所以，，以及和两个函数，就构成了的逻辑。现在，你不仅完全理解了的设计哲学，你更懂得了如何管理人生。

Veux的哲学，实质上是人生的哲学。

看一看这张图。

释义：

魂：你的灵魂，你的心中所想。

形：你的身体，你的外在形态。

人间：你的所作所为，所见所闻。

想一想，人活着不就是如此吗？

你的灵魂，控制着你的身体。

你的身体，与世界进行互动，改变并影响着人间。

人间所发生的一切，又时时刻刻塑造着你的灵魂。

闭上眼睛，跟随自己去体验：

你心中起了一个想法，你的身体也随着这个念头去做出行动。而这个行动，又改造了你周边的世界。同时，你也听见、看见了人间发生的事，你的思想你的灵魂在随之改变。

形、魂、人间，即是Vue单向数据流。

我们看一个小型Vue应用。

new Vue({
  // 魂(State)：你的心中所想
  data () {
    return {
      money: 0
    }
  },
  // 形(View): 你的外在形态
  template: `
    我有这么多钱：{{ money }}
  `,
  // 人间(Action):你的所做所为所见所闻
  methods: {
    earn_money () {
      this.money++
    }
  }
})

现代人似乎把一切都简化了——只为“钱”。

人活着就沦为了这样的东西：

魂，即state：心里只有钱,即money。

形：即view：有多少钱都炫富出来。

我有这么多钱：{{ money }}

人间：所做的只有一件事，即赚钱:

earn_money () {
  this.money++
}

闭上眼睛，跟随自己去体验：

你是一个纯粹为了钱的人。你心中所想，只有钱。你的外在表现，就是你有多少钱。你的一切行为，都是为了钱。

人生，远不止是钱。这时，你需要Veux。

如果人真的能活得这么纯粹，反倒是好事。

但真实的人生，往往更复杂：

赚钱不简单，你可能需要完成一系列复杂的工作，才能拿到钱。

有钱，也无法表现出来。但你可以通过穿着、房子、车子，表现出来。

思想更复杂，你心里远不止是钱，钱是为了守住更多的东西，例如尊严、爱情、亲情。

当面对捉摸不定的思想、深藏不露的人性、变幻莫测的人间...你需要一套处世哲学。

当面对大批量的State，无法直接取值的View，耦合严重的Action的时候，你就需要Vuex了。

如何管理，一个更复杂的人生？

人生，就是一个大型应用。

Vuex就是人的处世哲学。

当你的人生乱成一团糟时，你可以试试用Veux的方式，来梳理自己的生活。

第一步：想一想，你现在心里在意哪些事？

State，就相当于你心中在意的事。

那如何去维护这些State呢？钱、父母的健康、爱情，并不是轻轻松松可以得到的，你需要缕清楚之间的关系。

Vuex的解决方案：分解为目标和行动。

Vuex把复杂的“人间”，拆解成了行动(Action)与目标(Mutation)。

Mutation，即目标，它必须是同步函数的。它的功能必须是直截了当的，可以简单到“让XX更多”或"让XX归零"的程度。

Action，即行动，在其中可以包含异步操作(如Ajax获取数据)，并组合一个个小目标。

View，只能发起一个个行动(dispatch)。

Action，在这里可以执行多个同步/异步函数、发起多个行动(dispatch)，达成(commit)一个个小目标。

Mutation, 只能改变state(matate)。

State, 直接影响我的形态，这是vue的工作，不作表述。

当然，我们有时提取出一些更“有用”的状态，相当于state的计算参数，即

Getters，State的计算属性。

所以， Action + Mutation + state，以及dispatch和commit两个函数，就构成了Veux的逻辑。

我们也可以这样来管理生活

第二步： Mutation: 写下目标

第三步： Action: 写下行动

第四步： Getters: 写下其它指标

代码化

store.js

const store = new Vuex.Store({
  state: {
    money: 10000000,
    energy: 60,
    love: 30,
    parent_health:50
  },
  mutations: {
    earn_money (state) {
      state.money += 1000
    },
    pay_money (state,payload) {
      state.money -= payload.money_cost
      if(state.money < 0) state.money = 0
    },
    restore_energy(state, payload){
      state.energy = state.energy + payload.sleep_hour*10
      if(state.energy > 100) state.energy = 100
    },
    use_energy(state,payload){
        state.energy -= payload.energy_cost
        if(state.energy < 0) state.energy = 0
    },
    be_romantic(state){
        state.love += 10
    },
    enhance_harmony(state){
        state.love += 5
        parent_health += 10
    }
  },
  actions: {
    async work({commit}){
       commit("use_energy")
       await wait(8)
       commit("earn_money")
    },
    send_gift({commit}){
        commit("pay_money",{money_cost:10000})
        commit("be_romantic")
    },
    async family_walk({commit}){
        commit("use_energy",{energy_cost = 10})
        await wait(1)
        commit("enhance_harmony")
    }
    async sleep({commit}) {
        await wait(8)
        commit("restore_energy")
    },
    async dating({dispatch, state}){
        dispatch("send_gift")
        if(state.love >80){
            await dispatch("sleep")
        }
    }
  },
  getters(){
      location: (state)=>{
          return state.money>10000000 ? 4 : state.money>5000000 ? 5: null
      },
      walk_time: (state)=>{
          return Math.min(energy, parent_health)
      }
  }
})

module.exports = store

在Vue项目中使用Vuex

首先，在app.js中导入vuex

import Vue from "vue"
import App from "./components/App.vue"
import store from "./store"

new Vue({
  el: "#app",
  store,
  render: h => h(App)
})

之后，在编写.vue文件时，利用mapState, mapGetters, mapActions, 可以访问到StateGettersActions

注意：
mapState和mapGetters必须在computed中访问，因为它们返回的是对象，所以需要用拓展符...进行展开。

mapActions则是将Action挂载到methods上，也需要用拓展符...进行展开。

结语

成功学中有两个很重要的概念，叫“目标导向” “阶段性执行”，回头来看，不正是Veux的哲学吗？

Mutation目标导向: 设定简单的目标，改变State

Action阶段性执行：执行一个个Matation、异步函数、和其它阶段性执行。

现在，你不仅完全理解了Veux的设计哲学，你更懂得了如何管理人生。

你可以问自己三个问题：

梳理思绪：我心中最在意的事。

设立目标：这些最在意的事，会发生怎样改变？

创建行动：连接一个个小目标，形成你要做的行动。

然后，行动吧！只要做正确的事，你所期待的，就一定会发生！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103296.html

基于Vue,Vue-router,Vuex的简书网站模仿

摘要：本文假设读者手里有关于和的文档，并且对和有一定的了解。没有文档也没关系我这里有关于文档以及介绍，可以配合本文进行学习。关键就是在中部导航栏热门，新上榜那块，棕色框内的内容会根据中部导航栏选中不同内容进行改变。在这个教程里面，我会通过一系列的代码和图片来学习怎么使用vue-router,以及vuex。本文假设读者手里有关于vue-router和Vuex的文档，并且对Vue-router...

warnerwu 2019-08-29 11:16 评论0 收藏0
基于Vue,Vue-router,Vuex的简书网站模仿

摘要：本文假设读者手里有关于和的文档，并且对和有一定的了解。没有文档也没关系我这里有关于文档以及介绍，可以配合本文进行学习。关键就是在中部导航栏热门，新上榜那块，棕色框内的内容会根据中部导航栏选中不同内容进行改变。在这个教程里面，我会通过一系列的代码和图片来学习怎么使用vue-router,以及vuex。本文假设读者手里有关于vue-router和Vuex的文档，并且对Vue-router...

shiyang6017 2019-08-01 15:42 评论0 收藏0
vuex实现及简略解析

摘要：是如何被使用到各个组件上的为什么的数据是双向绑定的在组件中为什么用可以触发的在组件中为什么用可以触发的等等等等带着一堆问题，我们来自己实现一个，来理解的工作原理。为了解决以上问题，允许我们将分割成模块。大家都知道vuex是vue的一个状态管理器，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。先看看vuex下面的工作流程图 showImg(...

王晗 2019-08-23 15:34 评论0 收藏0
vue项目首页加载速度优化

摘要：凡是做的项目，特别是移动端的项目，首屏加载速度必定是一个绕不过去的话题。大家知道这些依赖库的文件都会被一起打包到那个文件里面，如果这些你的第三方依赖库很多，很大的话，那就会导致这个文件很大，那首屏加载的速度肯定会被拖慢。凡是做SPA的项目，特别是移动端的SAP项目，首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉，如果各位有更好的方案，不...

rickchen 2019-08-21 17:06 评论0 收藏0
vuex的使用

摘要：使用状态对象的访问我把理解成构造器中的里面存放一些数据，例如用户姓名性别身份证号等等。 vuex是配合vue一块儿使用的一个状态管理工具。我通常使用它来保存一些全局的数据，例如用户登录信息，用户身份信息，总之一些在很多页面都会使用到的信息，都保存在vuex里面，用的时候就不需要再去请求接口了，直接去vuex里面拿就可以了。先放官网地址安装 npm install vuex --sav...

tunny 2019-08-22 16:28 评论0 收藏0