08 vuex.md

vuex

vuex的核心是一个抽离出来的全局仓库(store),这个仓库用来维护一些需要在多个组件中使用的数据

vuex中的核心概念

https://vuex.vuejs.org/zh/guide/

安装、使用 vuex

首先我们在 vue.js 2.0 开发环境中安装 vuex :

npm install vuex --save

然后在src目录新建store文件夹

store
--|modules
----|note.js
----|auth.js
--|index.js

在index.js中写入

import Vue from 'vue'
import Vuex from 'vuex'
import note from './modules/note'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    note, // 新建的模块在这里引入
  }
})

在 main.js 中新加 :

import Vue from 'vue'
import App from './App'
import router from './router.js'
import iView from 'iview';
import iEditor from 'iview-editor';
import store from './store'  // 这个是新加的
import './style/index.less';

const Bus = new Vue()

Vue.use(iView);
Vue.config.productionTip = false

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

modules

这里我们为了便于日后的维护 , 我们使用了vuex的模块写法, 我们在 src 目录下 , 新建一个 store 文件夹 , 然后在里面新建了一个 index.js ，然后将每一个模块划分为一个对应的状态文件 , 然后将他们加入 store 文件夹下的 index.js 文件中的 modules 中。

modules: {
    note
    other: other,//其他组件
}