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;
}
}
}
