odoo owl store

https://odoo.github.io/owl/playground/

 

/** @odoo-module **/

const { Component, useState, useRef, mount, onMounted, props, useEnv, reactive } = owl;

function useStore(){
    const env = useEnv();
    return useState(env.store);
}

class TaskList{
    nextId = 1;
    tasks = [];
    addTask(text){
        text = text.trim();
        if(text){
            const task = {
                id: this.nextId++,
                text: text,
                isCompleted: false,
            };
            this.tasks.push(task);
        }
    }
    toggleTask(task){
        task.isCompleted = !task.isCompleted;
    }
    deleteTask(task){
        const index = this.tasks.findIndex((t)=>t.id===task.id);
        this.tasks.splice(index, 1);
    }
}

function createTaskStore(){
    return reactive(new TaskList());
}

class Task extends Component{
    static template = "tasktemplate";
    static props = ["task"];
    setup(){
        this.store = useStore();
    }
}

class Root extends Component {
    static template = "roottemplate";
    static components = { Task };
    setup(){
        const inputRef = useRef("add-input");
        onMounted(()=>inputRef.el.focus());
        this.store = useStore();
    }
    addTask(ev){
        if (ev.keyCode === 13){
            this.store.addTask(ev.target.value);
            ev.target.value = "";
        }
    }
}

const env = {
    store: createTaskStore()
};

mount(Root, document.body,  { templates: TEMPLATES, dev: true, env});

　　

 

<template>
  <div t-name="tasktemplate">
    <input type="checkbox" t-att-checked="props.task.isCompleted" />
    <t t-esc="props.task.text" />
    <span t-on-click="()=>store.deleteTask(props.task)"> =>X</span>
  </div>
  
  <div t-name="roottemplate">
    <input placeholder="enter new task" t-on-keyup="addTask" t-ref="add-input" />
    <br />
    <t t-foreach="store.tasks" t-as="task" t-key="task.id">
      <Task task="task" />
    </t>
  </div>
</template>