1.下载依赖
cnpm install vuex --save
2.定义一个store文件夹,在改文件夹下定义一个index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
creditCity: '', // 等待状态
},
mutations: {
"SET_CITY": function (state, city) {
state.creditCity = city;
},
},
getters: {
"GET_CITY": function (state) {
return state.creditCity
}
},
actions: {
"SET_CITY": function ({commit}, city) {
console.log('公共状态',city);
commit("SET_CITY", city)
},
}
});
export default store
4.在main.js中引入
import store from './store/'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
5.使用home.vue
//引入Vuex辅助函数,状态和方法
//属性
import { mapState } from 'vuex'
//异步动作
import {mapActions} from 'vuex'
methods:{
//Vuex辅助函数,将公共状态中的方法映射成当前的this方法
...mapActions(['SET_CITY']),
}
computed: {
//Vuex辅助函数,将公共状态中的属性映射成当前的computed中
...mapState(['creditCity']),
}
mounted(){
//调用公共状态中的异步方法
this.SET_CITY('上海');
//获取公共状态中的属性
console.log(this.creditCity);
}