1、初始化项目:vue init webpack vuex_demo
2、安装vuex:npm install vuex -D
3、在src文件夹里新建一个vuex文件夹
4、在vuex文件夹里依次新建一个index.js、actions.js、mutations.js、mutations-types.js、 getters.js。
5、在index.js里写上以下代码:
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
modules: { mutations },
actions
})
6、在actions.js里写上以下代码:
import * as types from './mutation-types'
// 处理业务逻辑
const actions = {
INCREMENT: (context) => {
context.commit(types.INCREMENT)
},
DECREMENT: (context) => {
context.commit(types.DECREMENT)
},
INCREMENTTWO: (context) => {
context.commit(types.INCREMENTTWO)
}
}
export default actions
7、在mutations.js里写上以下代码:
import { INCREMENT, DECREMENT, INCREMENTTWO } from './mutation-types'
import getters from './getters'
// 处理状态(数据)变化
const mutations = {
[INCREMENT]: state => state.count++,
[DECREMENT]: state => state.count--,
[INCREMENTTWO]: (state) => {
state.count = state.count + 2
return state.count
}
}
const state = {
count: 20
}
export default {
mutations: mutations,
state: state,
getters: getters
}
8、在mutations-types.js里写上以下代码:
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
export const INCREMENTTWO = 'INCREMENTTWO'
9、在getters.js里写上以下代码:
const getters = {
count (state) {
return state.count
}
}
export default getters
10、在main.js里加上以下代码:
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './vuex/'
Vue.use(Vuex)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
store,
el: '#app',
router,
components: { App },
template: '<App/>'
})
11、在components文件夹里新建一个Count.vue组件
12、在Count.vue组件写上以下代码:
<template>
<div>
<p>{{ count }}</p>
<p>
<button @click="increment()">+</button>
<button @click="decrement()">-</button>
<button @click="decrementTwo()">+2</button>
</p>
</div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
name: 'Count',
methods: {
// 对象写法:
...mapActions({
increment: 'INCREMENT',
decrement: 'DECREMENT',
decrementTwo: 'INCREMENTTWO'
})
},
computed: {
// 对象写法:
...mapGetters({
count: 'count'
})
}
}
</script>
12、启动项目就可以查看效果了