网上快速赚钱方法,响应式网站做优化好吗,90设计官网,南宁市两学一做网站看官方文档看的一脸懵逼#xff0c;后来看到了一篇比较容易理解的博文#xff0c;大概写下自己的理解 一、vuex是什么 是基于vue的状态管理模式#xff0c;一般用于解决大型项目中子组件向父组件传递数据的问题 二、基本概念 1、state 需要使用store的数据存储在state里后来看到了一篇比较容易理解的博文大概写下自己的理解 一、vuex是什么 是基于vue的状态管理模式一般用于解决大型项目中子组件向父组件传递数据的问题 二、基本概念 1、state 需要使用store的数据存储在state里并且在组件里通过this.$store.state.xxx访问 import Vue from vue
import vuex from vuex
Vue.use(vuex);export default new vuex.Store({state:{show:false}
}) 2、mutations $store.state.xxx一次只能操作一个state中的数据如果需要同时操作state中多个数据就需要使用mutations。 export default {state:{//stateshow:false},mutations:{switch_dialog(state){//这里的state对应着上面这个statestate.show state.show?false:true;//你还可以在这里执行其他的操作改变state}}
} 在组件里可以通过this.$store.commit(switch_dialog)触发这个事件。官方文档注明在mutations中的操作必须是同步的同时mutations是不区分组件的如果在别的module中存在同名的函数commit之后会一起触发。 $store.commit()是可以额外传入参数的提交事件时可以直接传入也可以选择对象风格 state:{show: false
},
mutations:{switch_dialog(state, n){//载荷state.show n}
}//传参的时候可以 this.$store.commit(switch_dialog,true)//也可以选择对象风格 this.$store.commit({ type: switch_dialog , n: true}) 3、module 如果想区分不同组件的state可以使用module import Vue from vue
import vuex from vuex
import dialog_store from dialog_store.js //引入对应组件的js文件
Vue.use(vuex);export default new vuex.Store({modules: {dialog: dialog_store //上面引入的模块}
}) 这样就可以在对应组件的js文件里管理对应的状态了(dialog_store.js) export default {state:{show:false}
} 在组件中可以通过this.$store.state.dialog.show访问它 4、action 多个state操作需要通过mutations那么如果是多个mutations的操作就需要通过action了另外官方推荐异步操作要放在action里。 export default {state:{//stateshow:false},mutations:{switch_dialog(state){//这里的state对应着上面这个statestate.show state.show?false:true;//你还可以在这里执行其他的操作改变state}},actions:{switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法context.commit(switch_dialog);//你还可以在这里触发其他的mutations方法},}
} 在组件里可以通过this.$store.dispatch(switch_dialog)触发事件 5、getters vuex的getters可以看作是vue中的computed如果需要对state中某个属性进行额外的运算可以在getters中进行定义 export default {state:{//stateshow:false},getters:{not_show(state){//这里的state对应着上面这个statereturn !state.show;}},mutations:{switch_dialog(state){//这里的state对应着上面这个statestate.show state.show?false:true;//你还可以在这里执行其他的操作改变state}},actions:{switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法context.commit(switch_dialog);//你还可以在这里触发其他的mutations方法},}
} 在组件中我们可以通过this.$store.getters.not_show获得这个状态getters中的状态不可以直接进行修改只能获取它的值 6、mapState、mapAction、mapGetters 如果你觉得上面获取状态的写法this.$store.state.xxx过于麻烦毕竟我们平时获取一个数据只需要写this.xxx可以选择使用mapState、mapAction、mapGetters下面引自上面提到的那篇博文 以mapState为例 templateel-dialog :visible.syncshow/el-dialog
/templatescript
import {mapState} from vuex;
export default {computed:{...mapState({show:statestate.dialog.show}),}
}
/script 相当于 templateel-dialog :visible.syncshow/el-dialog
/templatescript
import {mapState} from vuex;
export default {computed:{show(){return this.$store.state.dialog.show;}}
}
/script mapGetters、mapActions 和 mapState 类似 mapGetters 一般也写在computed中 , mapActions 一般写在 methods 中。 三、安装和使用方法 安装 vuex npm install vuex --save 然后为了方便管理可以在src/下创建一个store文件夹创建一个index.js, : import vuex from vuex
Vue.use(vuex);
var store new vuex.Store({state:{show:false}
}) 再然后 , 在实例化 Vue对象时加入 store 对象 : new Vue({el: #app,router,store,template: App/,components: { App }
}) 完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。 转载于:https://www.cnblogs.com/sue7/p/9805384.html
