7.vue ---- 分模块 命名空间 四个辅助函数 vuex的持久化 ElementPlus

分模块

modules state getters mutations actions

car/index.js
export default {
    state:{
        list: [
            {
                "id": 2,
                "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/164708/20/20875/95398/6086e7daE5d1ea589/2248e82326846870.jpg.webp",
                "text": "兰叶源  轻奢莫兰迪真绒布绢假塑料白玫瑰浆果花把束艺卉餐桌花瓶摆件 浅蓝色 两套更优惠",
                "price": 266,
                count:1,
                flag:false
            },
            {
                "id": 3,
                "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/156232/40/12942/112817/6041ced3Ef7f383b3/7e29e51c25f7b77e.jpg.webp",
                "text": "<i class="more2_info_self">自营</i>都市丽人文胸无钢圈聚拢中薄款蜂巢杯透气美背小花心波斯菊蕾丝胸罩内衣女2B9506 浅肤32/70A杯",
                "price": 98,
                count:1,
                flag:true
            },
            {
                "id": 4,
                "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/176546/26/4766/230854/607aa012E97def171/7417547d2d2e5da3.jpg.webp",
                "text": "兰叶源  创意中式陶瓷仕女香插香座插香器线香室内檀香家用线香薰炉摆件 小宫娥 坐  哑光",
                "price": 166,
                count:1,
                flag:false
            },
            {
                "id": 5,
                "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/119997/6/15535/123334/5f8d237bE36364127/a4d5ee3e0209d2a0.jpg.webp",
                "text": "<i class="more2_info_chosen"></i>得力（deli）4905 电脑椅 家用办公椅 转椅人体工学网布椅子 时尚升降座椅",
                "price": 459,
                count:1,
                flag:true
            },
        ],
    },
    getters:{
        money(state){
            return state.list.reduce((prev,next)=>prev+(next.flag?next.price*next.count:0),0)
        },
    },
    mutations:{
        changeNum(state,obj){  //+1  -1
            state.list[obj.index].count=Math.max(state.list[obj.index].count+obj.p,1)
        },
        selectAll(state,p){
            state.list.forEach((item)=>item.flag=p)
        }
    }
}

counter/index.js
export default {
    state: {
       
        count:1
    },
   
    mutations:{
       
        add(state){
            state.count++;
        }
    }
}

import car from './car/index'
import counter  from './counter/index';
let store = createStore({
   modules:{
    car,counter
   }
})

this.$store.state.模块名.变量

分完模块后，同名的问题

如果getters同名会报错 duplicate getter key: money

如果mutations actions同名，会同时执行

命名空间

namespaced:true

  this.$store.commit("car/selectAll",v)
  this.$store.getters["car/money"]

四个辅助函数

mapState

 ...mapState({
            list: (state) => state.car.list
        }),

mapGetters

 ...mapGetters({
            money: "car/money"
        }),

mapMutations

methods:{
  ...mapMutations({
            "changeNum":"car/changeNum"
        })
}

mapActions

methods:{
   ...mapActions({
      方法名:"模块名/actinos里的方法名"
   })
}

vuex的持久化

npm i -S vuex-persistedstate
import { createStore } from 'vuex'
import car from './car/index'
import counter  from './counter/index';
import persistedState from 'vuex-persistedstate'
let store = createStore({
   modules:{
    car,counter
   },
   plugins: [persistedState()]
})

export default store;

ElementPlus

基于 Vue 3，面向设计师和开发者的组件库

npm install element-plus --save

main.js

import router from './router'
import ElementPlus from 'element-plus'

app.use(ElementPlus)

git

分布式的代码管理平台

git config --global user.name 用户名

git config --global user.email 邮箱

git init 初始化本地仓库

git add . 把所有工作区的文件移入到暂存区

git status 查看状态

git commit -m "注释" 将文件要暂存区移到本地代码仓库

git remote -v 查看远程连接

git remote add origin 远程仓库的地址

git remote remove 远程连接名字