ShaLiWa 2020-01-17
以下是Vuex全局状态管理,数据共享具体操作: 官网:https://vuex.vuejs.org/zh/installation.html <!-- 以下是调用(获取/设置)共享数据的页面:01.vue --> <template> <div> <h3> Vuex全局状态管理,数据共享: 1,可以查看vuex官网:https://vuex.vuejs.org/zh/installation.html 2,引入vuex有两种方式: a,直接下载保存vuex.js b,(如果使用cnpm,所以下面也要使用cnpm)在项目名称下一级安装vuex: 安装: cnpm install vuex --save 卸载: cnpm uninstall vuex 3,所有插件的使用都是在src/main.js中进行导入的。包括:插件vue.js,vuex.js,App,router等。 打开src/main.js 导入如: import store from ‘./store‘ 即:在src目录下创建stroe文件夹,以及在store里面创建index.js文件,并进行配置,如下: import Vue from ‘vue‘ //调用 vue 这里可以分号,也可以不添加分号 import Vuex from ‘vuex‘; //调用 vuex 插件 这里可以分号,也可以不添加分号 Vue.use(Vuex) //全局调用Vuex,这里千万不能添加分号 export default new Vuex.Store({ //实例化vuex仓库 /*store运行机制: 通过actions触发mutations(类似事件),进而修改具体仓库状态state(store.state.count) Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。*/ state:{//共享数据池,声明公共数据,即状态 count:0, num:1, }, mutations:{//用于处理公共数据 increment(state,num){ state.count++; state.num = num; } }, actions:{//把数据处理委托给mutations对象的increment方法 inc({commit},obj){ //唯一方法:使用 store.commit 方法触发状态变更 commit(‘increment‘,obj); } } }) 4,在需要调用共享数据的页面进行数据调用和修改: 获取共享数据:this.$store.state.count; 修改共享数据:this.$store.dispatch(‘inc‘,形参/实参); /*store运行机制:actions --> mutations --> state 所以在修改共享数据时, 是直接调用actions中的指定函数,所以这里的‘inc‘函数明一定要存在。*/ </h3> <div>{{count}}</div> <input type="button" name="" value="修改共享数据num" @click="setNum"><br/> <input type="button" name="" value="获取共享数据num" @click="getNum"><br/> <input type="button" name="" value="获取共享数据count" @click="getCount"><br/> <div>=========================================</div> <input type="button" name="" value="修改共享数据love" @click="setLove"><br/> <input type="button" name="" value="获取共享数据love" @click="getLove"><br/> <input type="button" name="" value="获取共享数据a" @click="getA"><br/> </div> </template> <script> export default{ data(){ return{ count:0, love:‘I Love You Forever!‘, } }, methods:{ setNum(){ this.$store.dispatch(‘inc‘,this.love);//修改共享数据num //状态修改一定是在mutations中,一定不能在调用的页面之中 // this.$store.state.count++; }, getNum(){ console.log(this.$store.state.num); },getCount(){ console.log(this.$store.state.count); }, setLove(){ this.$store.dispatch(‘str‘,‘I want to fuck you fuck you!‘); //状态修改一定是在mutations中,一定不能在调用的页面之中 // this.$store.state.a++; }, getLove(){ console.log(this.$store.state.love); }, getA(){ console.log(this.$store.state.a); } } } </script> // 以下是src/store/index.js页面的配置 import Vue from ‘vue‘ //调用 vue 这里可以分号,也可以不添加分号 import Vuex from ‘vuex‘; //调用 vuex 插件 这里可以分号,也可以不添加分号 Vue.use(Vuex) //全局调用Vuex,这里千万不能添加分号 export default new Vuex.Store({ //实例化vuex仓库 /*store运行机制: 通过store.commit方法---触发---》store.state状态变更---》 Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。*/ state:{//共享数据池,声明公共数据,即仓库状态 count:0, num:1, a:0, love:‘i love you‘, }, mutations:{//用于处理公共数据,mutation 英 /mju??te??n/ 突变 increment(state,num){ state.count++;//状态修改一定是在mutations中,一定不能在调用的页面之中 state.num = num; }, strings(state,str){ this.state.love=str; this.state.a++;//状态修改一定是在mutations中,一定不能在调用的页面之中 } }, actions:{//把数据处理委托给mutations对象的increment方法 inc({commit},obj){ commit(‘increment‘,obj); }, str({commit},str){ commit(‘strings‘,str) } } })