一、安装
npm install vuex --save
二、配置
1.在src下新建store文件夹，新增index.js文件
2.在index.js中写入配置代码，如下:
1
2
3
4
5
6
7
| import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
})
|
3.在main.js中导入
1
2
3
4
5
6
7
8
9
| import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
|
三、在组件中使用
1.在methods中使用
1
2
3
4
5
6
| methods: {
handlerCityClick (city) {
this.$store.dispatch('changeCity', city)
this.$router.push('/')
}
}
|
2.在store/index.js中添加对应的state、actions和mutations
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| export default new Vuex.Store({
state: {
city: '北京'
},
actions: {
changeCity (ctx, city) {
ctx.commit('changeCity', city)
}
},
mutations: {
changeCity (state, city) {
state.city = city
}
}
})
|
四、优化拆分store/index.js
在store文件夹下分别新增state.js、actions.js、mutations.js，将index.js分拆
以actions.js为例:
1
2
3
4
5
| export default {
changeCity (ctx, city) {
ctx.commit('changeCity', city)
}
}
|
index.js:
1
2
3
4
5
6
7
8
9
10
11
12
| import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutation'
Vue.use(Vuex)
export default new Vuex.Store({
state,
actions,
mutations
})
|