美文网首页前端
vuex用法记录

vuex用法记录

作者: SunnySky_ | 来源:发表于2017-11-27 16:35 被阅读21次

Vuex简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

图片 1.png

State: 驱动应用的数据源;

View: 以声明方式将State映射到视图;

Actions: 响应在View上的用户输入导致的状态变化。

每一个 Vuex应用的核心就是store(仓库)。"store"基本上就是一个容器,它包含着你的应用中大部分的状态(state)。Vuex和单纯的全局对象有以下两点不同:

  1. Vuex的state是响应式的。当Vue组件从store中读取状态的时候,若store中的state发生变化,那么相应的组件也会相应地得到高效更新。
  2. 你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit) 转变( mutations )。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

什么时候使用vuex

虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。一般如果不打算开发大型单页应用,使用Vuex可能是繁琐冗余的,通过event-bus即可解决问题。

Vuex用法——state

 state: {
    todoList: [{
      'todo': '待办1',
      'done': false
    },
    {
      'todo': '待办2',
      'done': false
    },
    {
      'todo': '待办3',
      'done': false
    },
    {
      'todo': '待办4',
      'done': false
    },
    {
      'todo': '待办5',
      'done': false
    }]
  }

可在组件中通过$store.state对象获取数据

computed: {
   todoList () {
     return this.$store.state.todoList
   }
}

还可以通过vuex提供的mapState方法获取state数据

computed: {
    ...mapState(['todoList']),
    todoUndo () {
      return this.todoList.filter((todo) => {
        return !todo.done
      })
    }
  }

Vuex用法——getters

getters相当于计算属性,依赖于state和其他getters

getters: {
    undos (state) {
      return state.todoList.filter(todo => !todo.done)
    }
  }

可以通过vuex提供的mapGetters方法获取getters数据

...mapGetters({
  todoUndo: 'undos'
})

Vuex用法——mutations和actions

  1. mutations用于注册一组修改state的同步事件;
  2. actions用于提交mutations事件,其中可包含较复杂的异步方法。
mutations: {
  TODO_ADD (state, payload) {
    state.todoList.push(payload.todo)
  },
  TODO_DONE (state, payload) {
    state.todoList[payload.index].done = true
  },
    TODO_DEL (state, payload) {
    state.todoList.splice(payload.index, 1)
  }
},
  actions: {
  todoAdd ({ commit }, todo) {
    commit({
      type: 'TODO_ADD',
      todo: todo,
      done: todo.done
      })
  }
}

Vuex用法——modules

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将store分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

相关文章

  • vuex用法记录

    Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 State: 驱动应用的数据源; V...

  • Vuex源码解析

    手写vuex核心代码 vuex基本用法 分析 我们是通过new Vuex.store(option)获得一个sto...

  • vuex用法

    前言 看了网上很多关于用vuex的例子,但是千篇一律都是在页面加两个按键加减什么的,或者将一些半吊子理论,但是在实...

  • Vuex 用法

    Vuex简单的来说就是vue项目中的属于状态管理的插件。因为项目中也有用到,下面我说下具体用法。当然很简单的啦。这...

  • VUEX用法

    1. import Vue from 'vue'import Vuex from 'vuex'import mut...

  • vuex用法

    vuex vuex解决不同组件的数据共享,数据持久化。 1.安装: npm install v...

  • vuex基础用法

    简单汇总一下vuex的最基础的用法 服务端渲染的写法(推荐使用)

  • Vuex用法总结

    1. Vuex简介 Vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在...

  • VUEX 基本用法

    首先打开vuex的官方文档,看看这张图 actions跟mutations差不多,但是action不直接修改sta...

  • Vuex的用法

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 个人理解:就是在项目中可以对在state中定义的变...

网友评论

    本文标题:vuex用法记录

    本文链接:https://www.haomeiwen.com/subject/fgydbxtx.html