Composition API（三）：案例

数据存储案例

实现功能：

1. 如果是存值就直接保存。

2. 如果是取值就直接获取。

3. 取值后如果想要修改可以直接修改，不用再调用方法。

import useLocalStorage from '../hooks/useLocalStorage'

export default {
  setup() {
    let a = useLocalStorage('name')
    a.value = 123
  }
}

在 /hooks/useLocalStorage.js 文件中：

import { ref, watch } from "vue";

export default function (key, value) {
  // 定义响应式数据 data 的目的是取值后可以直接响应式的修改
  const data = ref(value);

  if (value) {
    // 1. 存值
    window.localStorage.setItem(key, JSON.stringify(value));
  } else {
    // 2. 取值
    data.value = JSON.parse(window.localStorage.getItem(key));
  }

  watch(data, (newValue) => {
    window.localStorage.setItem(key, JSON.stringify(newValue));
  });

  return data;
}

定义响应式数据 data 的目的是取值后可以直接响应式的修改。