Open CodeLittlePrince opened 6 years ago
vuex想必不需要我介绍很多了,这一节主要是为了填补项目没有引入vuex的问题,之后做完脚手架可以选择是否使用vuex。 因为vuex用的实在是很普遍,就不介绍细节了,我们直接搭项目。
在app目录新建文件夹store:
app
store
app/store ├── README.md ├── actions.js ├── getters.js ├── index.js ├── mutation-types.js ├── mutations.js └── state.js
不多说,直接上代码吧。 actions.js:
actions.js
import * as types from './mutation-types' /* 增加年龄 */ export const ageIncrease = function ({commit}) { setTimeout(() => { commit(types.AGE_INCREASE) }, 3000) }
getters.js:
getters.js
// 获取名字 export const name = state => state.name
index.js:
index.js
import Vue from 'vue' import Vuex from 'vuex' import * as actions from './actions' import * as getters from './getters' import state from './state' import mutations from './mutations' import createLogger from 'vuex/dist/logger' Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'production' export default new Vuex.Store({ actions, getters, state, mutations, strict: debug, plugins: debug ? [createLogger()] : [] })
mutation-types.js:
mutation-types.js
export const AGE_INCREASE = 'AGE_INCREASE'
mutations.js:
mutations.js
import * as types from './mutation-types' const mutations = { /* 增加年龄 */ [types.AGE_INCREASE](state) { state.age ++ } } export default mutations
state.js:
state.js
const state = { name: '子咻', age: 18 } export default state
最后我们将vuex引入app下的index.js就好了。 如果项目非常大,还需要module来管理的话,可以按照当前规则,进行改造即可。
到现在,我们就将整个项目的骨架搭好了,下一章,我们将正式开始做脚手架。
前言
vuex想必不需要我介绍很多了,这一节主要是为了填补项目没有引入vuex的问题,之后做完脚手架可以选择是否使用vuex。 因为vuex用的实在是很普遍,就不介绍细节了,我们直接搭项目。
新建文件
在
app
目录新建文件夹store
:上代码
不多说,直接上代码吧。
actions.js
:getters.js
:index.js
:mutation-types.js
:mutations.js
:state.js
:最后我们将vuex引入
app
下的index.js
就好了。 如果项目非常大,还需要module来管理的话,可以按照当前规则,进行改造即可。说明
最后
到现在,我们就将整个项目的骨架搭好了,下一章,我们将正式开始做脚手架。