Vue-day11

todolist

创建store文件夹

下有index.js目录

从vuex中导入方法

import { createStore,createLogger } from 'vuex'

实例化store并导出

export default createStore({
   
})

在main.js上导入

//导入store
import store from './store'

挂载到实例上面

var app = createApp(App)
//应用store
app.use( store );
app.mount('#app')

index.js页面

实例化时用到的属性和概念

export default createStore({
    state:{

    },
    getters:{ //定义计算方法 ( 类似组件的computed )

    },
    mutations:{ //定义同步方法
        
    },
    actions:{ //定义异步方法 ( 不能直接修改state中的数据, 需要借助同步方法完成修改 )

    },
    modules:{ //以模块化的方式管理state数据( 这里决定了每个模块的名字 )
  
    },
    plugins:[ createLogger() ]
})

App.vue页面书写页面效果

<template>
  <div class="app">
  </div>
</template>

components下创建组件

以SearchCom组件为例

先写页面

<template>
  <div class="search-box">
    <input type="text" placeholder="输入任务名称" v-model="name"> <button @click="add">添加</button>
  </div>
</template>

样式

<style scope>
.search-box{
    margin: 10px;
    display: flex;
    align-items: center;
}
.search-box input{
    flex:1;
    height: 40px;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding-left: 20px;
    outline: none;
    border: none;
}
.search-box button{
    width: 60px;
    text-align: center;
    height: 40px;
    outline: none;
    appearance: none;
    border: none;
    background-color: transparent;
}
</style>

在App.vue页面渲染

<template>
  <div class="app">
    <!-- 输入组件 -->
    <search-com />
    
    <!-- 统计组件 -->
    <Summary />

    <!-- 列表组件 -->
    <List />

  </div>
</template>

1. 任务管理

index.js页面

a每一个任务以对象的格式存储

b多个任务存储在数组当中

c数组要求可以在多个组件中共享

所以存储在vuex当中

export default createStore({
    state:{
//放在state中可以实现多股页面共享
        tasklist:[]
    },
    mutations:{ //定义同步方法
//写一个同步方法用来添加数据
        addTask(state,payload){
            //构建任务对象
            var obj = { id: state.tasklist.length + 1 , name: payload, status: false };
            //添加任务到任务列表
            state.tasklist.push( obj );
//调用一次新增一次到state中去
        },        
    },
})

mutations下面定义同步方法

在SearchCom页面调用方法

<template>
  <div class="search-box">
    <input type="text" placeholder="输入任务名称"
     v-model="name"> //用v-model绑定，输入的名称实时保存在data里面
    <button @click="add">添加</button>
//设置点击事件，点击时调用方法

  </div>
</template>

import { mapMutations } from 'vuex'
export default {
    data(){
        return {
            name:''//存储到此处
        }
    },
    methods:{
        ...mapMutations('tl',['addTask']),
        add(){
            // this.$store.commit('tl/addTask',this.name);
            //调用addTask(传参数)
            this.addTask(this.name);
        //
            this.name = '';
        }
    }
}

调用后执行tasklist中的addTask

index.js页面导入组件

import { createStore,createLogger } from 'vuex'

调用时实现打印

export default createStore({
    plugins:[ createLogger() ]
})

得到数据后在list组件渲染

list.vue页面

$store拿到index.js下实例化的对象

<template>
  <div class="list">
    <div class="title">任务列表</div>
    <div :class="{task:true,unfinish: !item.status }" v-for="(item,index) in tasklist" :key="index">
        <div class="left">
            <input type="checkbox" :checked="item.status" @click="change(item.id)">
            <span> {{ item.id }} </span>
            <span>  {{ item.name }} </span>
        </div>
        <span @click="del(item.id)">删除</span>
    </div>
    
  </div>
</template>

实现计数

index.js下定义计算方法，利用数组api

export default {
    namespaced:true,
    state:{
        tasklist:[]
    },
    getters:{ //定义计算方法 ( 类似组件的computed )
        unfinishCount(state){
            return state.tasklist.filter(item=>!item.status).length
        },
        finishCount(state){
            return state.tasklist.filter(item=>item.status).length
        }
    },
}

vuex核心概念

getters

定义计算方法（类似组件中的计算属性，每个计算方法必须有返回值）

actions

定义异步方法（内部可以执行异步代码，但是不能直接修改state中的数据）

modules

模块化管理state中的数据

模块

每个模块都是一个独立的js文件，每个模块有自己的state,getters,mutations,actions

注册模块

{
    modules:{
        模块名：模块，
        模块名：模块
    }
}

使用模块中的数据

this.$store.state.模块名.xx
this.$store.getters["模块名/yy"]

使用模块中的方法

this.$store.commit("模块名/同步方法")
this.$store.dispatch("模块名/异步方法")

辅助函数

为了简化在组件中使用vuex的数据和方法

mapState映射到computed中

映射

不使用模块

{...mapState(["属性1"，“属性2”，...])}

使用模块

{...mapState('模块名'.["属性1"，“属性2”，...])}

使用

this.属性

mapGetters映射到computed中

不使用模块

{...mapGetters(["计算方法1"，“计算方法2”，...])}

使用模块

{...mapState('模块名'.["计算方法1"，“计算方法2”，...])}

使用

this.计算方法

mapMutations映射到methods中

不使用模块

{...mapMutations(["同步方法1"，“同步方法2”，...])}

使用模块

{...mapState('模块名'.["同步方法1"，“同步方法2”，...])}

使用

this.同步方法（）

mapActions映射到methods中

不使用模块

{...mapActions(["异步方法1"，“异步方法2”，...])}

使用模块

{...mapActions('模块名'.["异步方法1"，“异步方法2”，...])}

使用

this.异步方法（）