Vuex之结构

wade

发布于 2020-04-24 17:21:52

3100

发布于 2020-04-24 17:21:52

文章被收录于专栏：coding个人笔记

之前整理了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里面引入并使用：