Vuex的学习笔记

当有多个单页应用,每个单页应用需要使用同一个数据的时候,Vuex就派上用场了,它相当于是一个前端的数据库。

Vuex中主要有五个概念:state、getter、action、mutation、module。

state: 用于定义,存储所有的数据,接下来的getter、action、mutation基本上都是操作state里面的内容。
getter: 相当于Vuex中的计算属性,它可以基于state中的内容,获得新的衍生。
mutation: Vuex中主要的修改操作,任何修改state内容的操作,都是在mutation中实现的(注意:这里面的所有操作都是同步的),相当于Vuex中methods。
action: Vuex中实现异步操作办法,传入的参数是mutation里面的方法,而不是state里的值。
module: Vuex中的模块化操作实现的位置,可以将上面state、getter、action、mutation分别写到这里。

用法(安装过程就省略了):
首先使用vue-cli建立工程:
vue init webpack project
在main.js中导入:

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store/index'

Vue.config.productionTip = false
Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

项目结构:

vuex.jpg

注意的地方:
1.store是使用vuex的主要地方test_module是将一个module的state、getter、action、mutation单独拆分出来。
2.test_module中的index是组装这些state、getter、action、mutation的地方。
3.store下的index可以单独在里面定义state,单独使用getter、action、mutation,并定义引入的module。
具体请看:
vuex的demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 上一章总结了 Vuex 的框架原理,这一章我们将从 Vuex 的入口文件开始,分步骤阅读和解析源码。由于 Vuex...
    你的肖同学阅读 5,764评论 3 16
  • Vuex 概念篇 Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式...
    Junting阅读 8,193评论 0 43
  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 6,102评论 3 3
  • vuex学习笔记 vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存...
    EL_PSY_CONGROO阅读 4,075评论 0 0
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 10,105评论 7 61