vuex的应用
在我们用vue编程的时候,经常会用到vuex这个插件,而在具体的开发过程中vuex是如何应用的呢?
首先vuex的定义是什么:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是处理所有组件数据共享的。
其次,我们如何使用:我们在使用vuex,因为只能建立一个store,所以如果在开发过程中不能把所有的程序都放到store中的index.js中,所以我们就用到了模块化的开发。一下就是我们常用的一些步骤
1.在store文件中建立一个新的模块,例city.js里面写上代码
const city = {
// 命名空间
namespaced: true,
// 设置默认值
state:{
cityName:"上海"
},
mutations:{
setCityName(state,name){
state.cityName = name
}
}
}
export default city
2.然后我们就需要在store文件中的入口文件index.js中引入,注册
import city from "./module/city" //引入
let store = new Vuex.Store({
modules:{
city //注册
}
3.此时我们就可以使用在组件city.vue中了,
methods:{
...mapMutations("city",["setCityName"]), //对象里面不能再嵌套对象,所以需要先展开
clickCity(item){ //这里为点击要执行的函数,包含里面要传的数据
this.setCityName(item.name) //这里是要执行方法
},
vuex有五个核心 在使用各自对应辅助方法时应用的地方也不相同
State:应用在computed
Getter:应用在computed
Mutation:应用在methods
Action:应用在methods
module
暂且先说这么多,后期再补。