Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态,
并以相应的规则保证状态以一种可预测的方式发生变化。
在vue脚手架中简单应用vuex来实现组件之间传递数据,当然组件之间传递可以使用emit,但页面组件越来越多涉及到数据传递就越来越麻烦,vuex的便利性就体现出来。
通常设计store对象都包含4个属性:state,getters,actions,mutations。
如何理解这4个属性呢,从自己的话来理解:
- state (类似存储全局变量的数据)
- getters (提供用来获取state数据的方法)
- actions (提供跟后台接口打交道的方法,并调用mutations提供的方法)
- mutations (提供存储设置state数据的方法)
项目中store.js的概要设计可如下:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
let store = new Vuex.Store({
// 1. state
state:{
city:"城市名"
},
// // 2. getters
getters:{
// 参数列表state指的是state数据
getCityFn(state){
return state.city;
}
},
// 3. actions
// 通常跟api接口打交道
actions:{
// 设置城市信息
// 参数列表:{commit, state}
// state指的是state数据
// commit调用mutations的方法
// name就是调用此方法时要传的参数
setCityName({commit,state}, name){
// 跟后台打交道
// 调用mutaions里面的方法
commit("setCity", name);
}
},
// 4. mutations
mutations:{
// state指的是state的数据
// name传递过来的数据
setCity(state, name){
state.city = name;//将传参设置给state的city
}
}
});
export default store;
在main.js中引用vuex,就可以在组件使用this.$store来调用方法
import store from './store/store.js';
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
当需要更改state中的方法时,通过this.$store.dispatch来调用store.js中actions所提供的方法,并将修改的内容传参过去,就完成啦。例如:
// 调用vuex的ations设置城市的值
this.$store.dispatch("setCityName", 'zhengzhou');