Svelte学习笔记八：使用Store完成组件间参数共享

Store

Store主要功能是类似vuex、redux和mobx等工具，用于跨组件之间的状态共享。

1. Store注册与更新

Store写法只需要写在一个js文件中，然后通过svelte/store中提供的writable方法来向公共仓库中注册一个值作为一个仓库元素，之后在组件内可以通过subscribe来监听仓库元素的变化（理解上来说本质上是一个发布订阅的模式），通过set和update来发布仓库内某一个值的变化。

• Set：直接将仓库内的某个数指定为某个值
• Update：接收一个仓库当前值的参数的回调函数，将执行结果作为要更新仓库参数的值

来看一个例子

// Store.js
import { writable } from 'svelte/store'

const initalEvent = [{
    id: 1,
    name: "空白事件1",
    desc: "这是一个测试事件"
}];

const initHobbies = ["抽烟","喝酒","烫头"]

// 在仓库中写入两个需要被监听的值
export const eventList = writable(initalEvent)
export const hobbies = writable(initHobbies)

// Store.svelte



    {#each list as item}
         
    {/each}
    

    

        
事件编号
        
事件名称
        
事件详情
    
    

         

            
{item.id}
            
{item.name}
            
{item.desc}
         





添加新事件
清空事件


    我们的爱好是 {$hobbies.join(",")}

几个要注意的点：

1. 通过evemtList.subscribe来保持组件内部的参数和仓库中的参数保持一致
2. 利用update和set对仓库内的eventList变量进行更新

存在的问题：

如果当有多个共有变量需要被引入，我们莫非要写很多xxx.subscribe(value => xxx = value)很麻烦，因此svelte使用了$+param\ast \ast 来\ast \ast 自动订阅\ast \ast 引入变量内部的参数值，如上面例子中的hobbies,我们通过\ast \ast$hobbies，set，update来直接更新仓库内的参数值

实验结果

2. Store的继承

使用derived方法，来继承一个仓库，并对这个仓库的值可以做出相应的操作，可以类比于vuex中的computed

// Store.js
// 这里省略上面的代码

// 第一个参数是需要继承的对象
// 后面是一个回调函数，参数为继承仓库的内部的值
// 返回值为该变量对应仓库内存储的值
export const unSolvedEvents = derived(eventList, e => e.length)

3. Store的双向绑定和封装

我们可以将一个Counter Store的功能进行封装

具体封装的例子如下

// Store.js
function createCounter(initCount = 0) {
    const { subscribe, set, update } = writable(initCount)

    return {
        subscribe,
        increase: (num = 1) => update(c => c + num),
        decrease: (num = 1) => update(c => c - num),
        clear: () => set(0),
        set
    }
}

export const count = createCounter()
export const doubleCount = derived(count, c => c * 2)

// Store.svelte

    {$count} * 2 = {$doubleCount}
    
     count.increase(1)}>+1
     count.decrease(1)}>-1

这里有几个点需要注意

• 如果要对仓库的值使用双向绑定，需要再导出的时候导出set方法，然后如果要使用$count来自动订阅count变量，我们需要在导出的时候导出subscribe！！
• 双向绑定方法还是一样通过$count可以直接修改和得到count仓库内的值

实验效果