npm install vuex@next --save

import { createStore } from "vuex";
const store = createStore({
  state: {
    //存儲(chǔ)當(dāng)前登錄用戶信息，包含token等數(shù)據(jù)
    user: null,
  },
  mutations: {
    setUser(state, data) {
      state.user = data;
    },
  },
});
export default store;

import { createApp } from "vue";
import App from "./App.vue";
import Vant from "vant";
import "vant/lib/index.css";
import "amfe-flexible";
import "./styles/index.css";
import router from "./router";
import store from "./store"; //導(dǎo)入store
createApp(App).use(Vant).use(router).use(store).mount("#app"); //完成store的注冊(cè)操作

import { reactive, toRefs, ref } from "vue";
import { login, sendSms } from "../../api/user";
import { Toast } from "vant";
import { useStore } from "vuex"; //導(dǎo)入useStore

export default {
  setup() {
    const loginForm = ref();
    //獲取store
    const store = useStore();

 return {
      ...toRefs(user),
      ...useSubmit(user, store),//在調(diào)用useSubmit方法的時(shí)候傳遞store容器
      userFormRules,
      loginForm,
    };

//用戶登錄
function useSubmit(user, store) {
  const onSubmit = async () => {
    //1、獲取表單數(shù)據(jù)
    //2、表單驗(yàn)證
    //3、提交表單請(qǐng)求
    Toast.loading({
      message: "登錄中...",
      forbidClick: true, //禁用背景點(diǎn)擊
      duration: 0, //持續(xù)時(shí)間，默認(rèn)是2000毫秒，如果為0則持續(xù)展示
    });
    const res = await login(user);
    if (res.data.code === 0) {
      store.commit("setUser", res.data);
      Toast.success("用戶登錄成功");
    } else {
      Toast.fail("用戶名或密碼錯(cuò)誤");
    }

    //4、根據(jù)請(qǐng)求響應(yīng)結(jié)果處理后續(xù)操作。
  };
  return {
    onSubmit,
  };
}

import { createStore } from "vuex";
const TOKEN_KEY = "TOUTIAO_USER";
const store = createStore({
  state: {
    //存儲(chǔ)當(dāng)前登錄用戶信息，包含token等數(shù)據(jù)
    // user: null,
    user: JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
  },
  mutations: {
    setUser(state, data) {
      state.user = data;
      window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
    },
  },
});
export default store;

JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));

// 存儲(chǔ)數(shù)據(jù)
export const setItem = (key, value) => {
  //將數(shù)組，對(duì)象類型的數(shù)據(jù)轉(zhuǎn)換為JSON格式的字符串進(jìn)行存儲(chǔ)
  if (typeof value === "object") {
    value = JSON.stringify(value);
  }
  window.localStorage.setItem(key, value);
};
//獲取數(shù)據(jù)
export const getItem = (key) => {
  const data = window.localStorage.getItem(key);
  //這里使用try..catch的，而不是通過if判斷一下是否為json格式的字符串，然后在通過parse進(jìn)行轉(zhuǎn)換呢，目的就是是為了方便處理，因?yàn)閷?duì)字符串進(jìn)行判斷看一下是否為json格式的字符串，比較麻煩一些。還需要通過正則表達(dá)式來完成。而通過try..catch比較方便
  // 如果data不是一個(gè)有效的json格式字符串，JSON.parse就會(huì)出錯(cuò)。
  try {
    return JSON.parse(data);
  } catch (e) {
    return data;
  }
};
//刪除數(shù)據(jù)
export const removeItem = (key) => {
  window.localStorage.removeItem(key);

import { createStore } from "vuex";
import { getItem, setItem } from "../utils/storage";
const TOKEN_KEY = "TOUTIAO_USER";
const store = createStore({
  state: {
    //存儲(chǔ)當(dāng)前登錄用戶信息，包含token等數(shù)據(jù)
    // user: null,
    // user: JSON.parse(window.localStorage.getItem(TOKEN_KEY)),
    user: getItem(TOKEN_KEY),
  },
  mutations: {
    setUser(state, data) {
      state.user = data;
      setItem(TOKEN_KEY, state.user);
      // window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user));
    },
  },
});
export default store;