Vuex之结构

之前整理了vuex的使用场景,现在开始学习学习怎么使用。我会根据官网api来重新学习一遍。

首先我们要安装vuex:

Npm install vuex –save

官网推荐的vuex结构:

├── main.js
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块
个人是比较喜欢这样:
├── main.js
├── components
│   ├── App.vue
│   └── ...
└── vuex
    ├── store.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

分模块我们先不管,所以直接建成的目录结构:

Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。这也意味着,每个应用将仅仅包含一个 store 实例。

Store.js里面:

import Vuex from 'vuex'import Vue from 'vue'import mutation from './mutation'import actions from './actions'import getter from './getter'Vue.use(Vuex)const state = { score: [50, 90, 40, 80, 65, 99, 30, 87]}export default new Vuex.Store({ state, getter, actions, mutation})

然后在main.js里面引入并使用:

这样,我们就搭建出了vuex最简单可以使用的结构了。

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Webpack第三天

    我们已经能打包能启动了,现在我们要继续开发。开发的时候我们要一直刷新才能出现,这很浪费时间,而webpack自带了热更新。

    wade
  • webpack(4.8.3)总结之一

    前言:webpack4从入门到高阶配置,本文先讲述webpack4的安装、基础配置、进阶配置,高阶配置放置下篇讲述。

    wade
  • webpack(4.8.3)总结

    前言:webpack4从入门到高阶配置,本文先讲述webpack4的安装、基础配置、进阶配置,高阶配置放置下篇讲述。

    wade
  • 微信小程序Ⅳ [js文件的外部引用]

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    泥豆芽儿 MT
  • mongodb执行js脚本(一)---shell执行

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/q383965374/article/details/464...

    拓荒者
  • error: unable to unlink old 'antzb-web/src/main/webapp/js/ny-details.js': Invalid argument

    git -c diff.mnemonicprefix=false -c core.quotepath=false checkout – antzb-web/sr...

    qubianzhong
  • 独家 | 在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)

    本文首先介绍了TensorFlow.js的重要性及其组件,并介绍使用其在浏览器中构建机器学习模型的方法。然后,构建使用计算机的网络摄像头检测身体姿势的应用程序。

    数据派THU
  • 在浏览器中使用TensorFlow.js和Python构建机器学习模型(附代码)

    你最喜欢用什么工具来编写机器学习模型?数据科学家们对这个永恒的问题会给出各种不同的答案。一些人喜欢RStudio,另一些人更喜欢Jupyter Notebook...

    大数据文摘
  • 基于Tensorflow.js实现浏览器级别的目标识别应用实践

    tensorflow.js 是谷歌于今年推出的浏览器级别的深度学习框架,TensorFlow 团队在其github官网上也公开了表示基于网页的 JavaScri...

    sparkexpert
  • Web 性能优化: 使用 Webpack 分离数据的正确方法

    制定向用户提供文件的最佳方式可能是一项棘手的工作。 有很多不同的场景,不同的技术,不同的术语。

    Fundebug

扫码关注云+社区

领取腾讯云代金券