01===>
module的理解：将一个大的系统进行拆分 拆分成若干个细的模块
给个模块都有自己的 state mutations 等属性
这样可以在自己的小模块中进行修改 方便维护
module的简单使用
(1)创建main.js(首页)在store.js同级中
（2）store.js中引入
（3）modules的形式注册
在store.js中写
{ // Vuex 仓库文件(入口) import Vue from 'vue' import Vuex from 'vuex' //全局注册Vue.use(Vuex) // 引入子模块（add） import shopcar from "./ShopCar" import main from "./main" // 创建一个状态厂库 并且将它暴露出去 export default const store=new Vuex.Store({ modules:{ // key:(模块名) value(对应模块的配置) shopcar, //它相当于把shopcar.js暴露的那个对象放置在这里 main } }) // 取各个模块的值 console.log(store.state.shopcar.name) //这样可以拿到可拿到 购物出的的name值为 “我的值是购物车” console.log(store) //下面为输出的值 /* state: Object main: Object shopcar: Object */ export default store } 然后创建main.js(首页) { export default{ state: { val: "主文件需要的值", name: "我的值是主文件" }, mutations:{ }, } }
02====》
如何在商家页面Merchant.vue 获取到 modules模块中--shangjia.js中state的数据
ps===>在main.js文件中 key值是不能够改名字的 value是引入进来的那个文件名
key:vaulue相同的话可以简写
main.js { //引入store实例 import storeaa from "./store/store"; new Vue({ router, store: storeaa, //这里是key:value的形式 这里是不能够改变的哦 key 的固定的值是store value的值可以跟引入的实例对象一致即可 // 这这里注册store后，全局可以共享 store了 render: h => h(App) }).$mount("#app"); } store.js { import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 引入子模块 （千万别忘记了） import shopcar from "./ShopCar" import main from "./main" import shangjia from './shangjia' // 创建一个状态厂库 并且将它暴露出去 export default const store=new Vuex.Store({ modules:{ // key:(模块名) value(对应模块的配置) shopcar, //它相当于把shopcar.js暴露的那个对象放置在这里 main, shangjia } }) export default store } shangjia.js modules中管理商家模块的数据 { export default { state:{ val:"我是商家页面数据", name:"哈哈哈商家" } } } Merchant.vue获取shangjia.js中state的数据 { <template> <div> <p>{{ test }}</p> </div> </template> export default { data(){ return{ test:"", } }, created() { this.test=this.$store.state.shangjia.val; }, } }
03===》
利用computed：{}计算属性提高性能 例2不变
利用computed只要母体数据不发生改变 它就不会发生改变
添加 Merchant.vue中
将值渲染出来
<h2>为了提升性能 {{test1}}</h2>
computed: { test1() { return this.$store.state.shangjia.name; //返回 “哈哈哈商家” } }, }
04===>
将所有的数据放在store.js的data中
两个页面的代码一模一样 A页面点击加1 B页面数字同样发生改变
ps===>在利用modules模块来管理数据的时候 你需要在store.js 引入相应的子模块 如
例2
如果将所有的数据 都放在store.js 的data中饭就不需要 引入相应的子模块
ps===> 只要你去修改state中的值 你就考虑写mutations
A.vue页面 B.vue页面
{ <template> <div> <button @click="clickDec">-</button> <span> {{ num }} </span> <button @click="addNum">+</button> </div> </template> export default { data() { return { test: "" }; }, methods:{ addNum(){ // 提交一个mutations ，改变state中的值 相调用mutations中的addNum函数 this.$store.commit("addNum") }, clickDec(){ this.$store.commit("clickDec") } }, computed:{ num(){ return this.$store.state.num } }, }; } store.js { import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 创建一个状态厂库 并且将它暴露出去 export default const store=new Vuex.Store({ state(){ return{ test:"我输测试数据", num:0 } }, mutations:{ addNum(state){ state.num++; }, clickDec(state) { state.num--; }, } }) export default store }
5====》
对例4进行优化 this.$store.commit("chang",1) 传参 判断出入的值正数还
是负数 负数不能小于0
A页面 B页面 简化了代码
{ <button @click="clickDec">-</button> <span> {{ num }} </span> <button @click="addNum">+</button> methods:{ addNum(){ // 提交一个mutations ，改变state中的值 用了第一种方式 this.$store.commit("chang",1) }, clickDec(){ //如果小于0 不执行改函数 if(this.$store.state.num==0){ //不能将这一条语句放在 最后 将没有意义 return; } this.$store.commit("chang",-1) // console.log(this.$store.state.num) } }, } store.js 简化了 { mutations: { chang(state, zhi) { state.num += zhi; } } }
