真正掌握vuex的使用方法(一)
导语:vuex是什么?我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中,希望按照我的步骤一步一步来进行练习!
咱们知道,vue项目当中的父子组件的交互是单通道传递,父组件通过props向子组件传递参数,而在子组件当中不不能直接修改接收的参数,而是需要通过自定义事件的方式,例如:
<!-------------------------------------父组件---------------------------------> <template> <div> <a href="javascript:;" @click="show = true">点击</a> <t-dialog :show.sync="show"></t-dialog> </div> </template> <script> <template> <div> {{isRed}} <children :isRed.sync="isRed"></children> </div> </template> <script> import children from "@/components/children" export default { data() { return { isRed: false//向子组件传递默认值 } }, components: { children } } </script> <!-------------------------------------子组件---------------------------------> <template> <div> <input type="button" :class="{active:isRed}" value="改变" @click="change"> </div> </template> <script> export default { props:['isRed'], methods:{ change(){ //取反改变父组件的值 this.$emit("update:isRed",!this.isRed); } } } </script> <style scoped> .active{ background:red; } </style>
这样是不是很麻烦?如果用vuex就会变的非常简单!
1、首先用npm包管理工具,安装vuex
//因为这个包在生产环境中也要使用,所以在这里一定要加上 –save npm install vuex --save
2、然后在main.js当中引入vuex
import vuex from 'vuex'
3、使用vuex
Vue.use(vuex);//使用vuex //创建一个常量对象 const state={ isRed:false } var store = new vuex.Store({//创建vuex中的store对象 state })
4、随后在实例化Vue对象时,加入store对象:
new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App } })
5、最后再将最初的示例修改为:
<!-------------------------------------父组件---------------------------------> <template> <div> {{$store.state.isRed}} <children></children> </div> </template> <script> import children from "@/components/children" export default { components: { children } } </script> <!-------------------------------------子组件---------------------------------> <template> <div> <input type="button" :class="{active:$store.state.isRed}" value="改变" @click="$store.state.isRed=!$store.state.isRed"> </div> </template> <script> export default {} </script> <style scoped> .active{ background:red; } </style>
到目前为止,这个示例就被简化了很多?
前面将代码都写到了main.js中了,为了日后便于维护,更好的管理vuex,最好对vuex进行一些调整。
1、在src文件夹根目录创建vuex文件夹,然后在该文件夹内创建store.js文件。然后在文件内引入vue和vuex。
import Vue from 'vue';
import Vuex from 'vuex';
2、然后使用Vuex
Vue.use(Vuex );//使用Vuex //创建一个常量对象 const state={ isRed:false } //让外部引用vuex export default new Vuex.Store({//创建vuex中的store对象 state })
3、然后将main.js之前写入的与vuex相关的内容清除掉,引入刚刚创建的store.js文件
import store from '@/vuex/store'
4、在实例化Vue对象时,加入引入的store对象:
new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App } })