From a36de5320292a2de6d23afda3a714fc53ba79932 Mon Sep 17 00:00:00 2001
From: barney <15270405776@163.com>
Date: Sat, 8 Oct 2022 18:49:42 +0800
Subject: [PATCH] =?UTF-8?q?vuex=E5=92=8Cpinia?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.gitignore | 3 +
Vite-Vue-tutorial/package.json | 3 +-
Vite-Vue-tutorial/src/.prettierrc | 8 +-
Vite-Vue-tutorial/src/hooks/useCategories.js | 18 +-
Vite-Vue-tutorial/src/hooks/useProducts.js | 84 +-
Vite-Vue-tutorial/src/services/banners.js | 4 +-
Vite-Vue-tutorial/src/services/categories.js | 4 +-
Vite-Vue-tutorial/src/services/products.js | 20 +-
Vite-Vue-tutorial/src/utils/request.js | 74 +-
Vite-Vue-tutorial/src/utils/tools.js | 21 +-
Vite-Vue-tutorial/src/views/Detail.vue | 40 +-
Vite-Vue-tutorial/src/views/Home.vue | 20 +-
Vite-Vue-tutorial/src/views/List.vue | 102 +-
pinia-pre/.gitignore | 24 +
pinia-pre/.vscode/extensions.json | 3 +
pinia-pre/README.md | 16 +
pinia-pre/index.html | 13 +
pinia-pre/package-lock.json | 1492 ++++++++++++++++++
pinia-pre/package.json | 21 +
pinia-pre/public/vite.svg | 1 +
pinia-pre/src/App.vue | 40 +
pinia-pre/src/assets/vue.svg | 1 +
pinia-pre/src/components/HelloWorld.vue | 12 +
pinia-pre/src/main.ts | 8 +
pinia-pre/src/stores/counter.ts | 47 +
pinia-pre/src/style.css | 0
pinia-pre/src/vite-env.d.ts | 7 +
pinia-pre/tsconfig.json | 18 +
pinia-pre/tsconfig.node.json | 9 +
pinia-pre/vite.config.ts | 7 +
vite-ts-project/src/views/List.vue | 4 +-
vite-ts-project/src/views/Login.vue | 8 +-
vite-ts-project/src/views/User.vue | 14 +-
vuex-app/.gitignore | 24 +
vuex-app/.vscode/extensions.json | 3 +
vuex-app/README.md | 7 +
vuex-app/index.html | 13 +
vuex-app/package-lock.json | 1355 ++++++++++++++++
vuex-app/package.json | 21 +
vuex-app/public/vite.svg | 1 +
vuex-app/src/App.vue | 26 +
vuex-app/src/assets/vue.svg | 1 +
vuex-app/src/components/HelloWorld.vue | 5 +
vuex-app/src/main.js | 7 +
vuex-app/src/store/index.js | 20 +
vuex-app/src/style.css | 90 ++
vuex-app/vite.config.js | 7 +
47 files changed, 3516 insertions(+), 210 deletions(-)
create mode 100644 pinia-pre/.gitignore
create mode 100644 pinia-pre/.vscode/extensions.json
create mode 100644 pinia-pre/README.md
create mode 100644 pinia-pre/index.html
create mode 100644 pinia-pre/package-lock.json
create mode 100644 pinia-pre/package.json
create mode 100644 pinia-pre/public/vite.svg
create mode 100644 pinia-pre/src/App.vue
create mode 100644 pinia-pre/src/assets/vue.svg
create mode 100644 pinia-pre/src/components/HelloWorld.vue
create mode 100644 pinia-pre/src/main.ts
create mode 100644 pinia-pre/src/stores/counter.ts
create mode 100644 pinia-pre/src/style.css
create mode 100644 pinia-pre/src/vite-env.d.ts
create mode 100644 pinia-pre/tsconfig.json
create mode 100644 pinia-pre/tsconfig.node.json
create mode 100644 pinia-pre/vite.config.ts
create mode 100644 vuex-app/.gitignore
create mode 100644 vuex-app/.vscode/extensions.json
create mode 100644 vuex-app/README.md
create mode 100644 vuex-app/index.html
create mode 100644 vuex-app/package-lock.json
create mode 100644 vuex-app/package.json
create mode 100644 vuex-app/public/vite.svg
create mode 100644 vuex-app/src/App.vue
create mode 100644 vuex-app/src/assets/vue.svg
create mode 100644 vuex-app/src/components/HelloWorld.vue
create mode 100644 vuex-app/src/main.js
create mode 100644 vuex-app/src/store/index.js
create mode 100644 vuex-app/src/style.css
create mode 100644 vuex-app/vite.config.js
diff --git a/.gitignore b/.gitignore
index a547bf3..a9eb91b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,6 @@
+# vscode-workspace
+*.code-workspace
+
# Logs
logs
*.log
diff --git a/Vite-Vue-tutorial/package.json b/Vite-Vue-tutorial/package.json
index 27d543d..5ce1499 100644
--- a/Vite-Vue-tutorial/package.json
+++ b/Vite-Vue-tutorial/package.json
@@ -6,7 +6,8 @@
"scripts": {
"dev": "vite",
"build": "vite build",
- "preview": "vite preview"
+ "preview": "vite preview",
+ "format": "prettier --write ./**/*.{html,vue,ts,js,json}"
},
"dependencies": {
"axios": "^0.27.2",
diff --git a/Vite-Vue-tutorial/src/.prettierrc b/Vite-Vue-tutorial/src/.prettierrc
index 6de2ea7..0d1e949 100644
--- a/Vite-Vue-tutorial/src/.prettierrc
+++ b/Vite-Vue-tutorial/src/.prettierrc
@@ -1,4 +1,6 @@
{
- "singleQuote": false,
- "semi": true
-}
\ No newline at end of file
+ "singleQuote": false,
+ "semi": true,
+ "tabWidth": 4,
+ "useTabs": true
+}
diff --git a/Vite-Vue-tutorial/src/hooks/useCategories.js b/Vite-Vue-tutorial/src/hooks/useCategories.js
index 5273527..a20fd4c 100644
--- a/Vite-Vue-tutorial/src/hooks/useCategories.js
+++ b/Vite-Vue-tutorial/src/hooks/useCategories.js
@@ -3,15 +3,15 @@ import { ref } from "vue";
/**
* 返回分类接口的数据
- * @returns
+ * @returns
*/
export const useCategories = () => {
- const categories = ref([]);
- loadCategoriesAPI().then(res => {
- categories.value = res.data;
- });
- return {
- categories,
- }
-};
\ No newline at end of file
+ const categories = ref([]);
+ loadCategoriesAPI().then((res) => {
+ categories.value = res.data;
+ });
+ return {
+ categories,
+ };
+};
diff --git a/Vite-Vue-tutorial/src/hooks/useProducts.js b/Vite-Vue-tutorial/src/hooks/useProducts.js
index f29e077..05cba6d 100644
--- a/Vite-Vue-tutorial/src/hooks/useProducts.js
+++ b/Vite-Vue-tutorial/src/hooks/useProducts.js
@@ -1,53 +1,51 @@
-import { loadProductAPI } from '../services/products';
+import { loadProductAPI } from "../services/products";
import { ref } from "vue";
/**
* 返回商品接口的数据
* @param {*} categoryId 当前的商品分类id, 空表示获取所有分类
- * @returns
+ * @returns
*/
-export const useProducts = (categoryId='') => {
+export const useProducts = (categoryId = "") => {
+ const page = ref(1); // 当前页码
+ const loading = ref(false); // 是否在加载中
+ const finished = ref(false); // 是否加载完成
+ const currentCategoryId = ref(categoryId); // 当前分类id
+ const products = ref([]); // 商品数据
- const page = ref(1); // 当前页码
- const loading = ref(false); // 是否在加载中
- const finished = ref(false); // 是否加载完成
- const currentCategoryId = ref(categoryId); // 当前分类id
- const products = ref([]); // 商品数据
+ /**
+ * 加载products
+ * @param {*} needReset 是否需要重置products
+ * @param {*} categoryId 分类id
+ */
+ const onLoad = (needReset = false, categoryId = "") => {
+ if (needReset) {
+ // 重置一些参数
+ finished.value = false;
+ products.value = [];
+ page.value = 1;
+ }
+ // 分类id不为空才需要修改
+ if (categoryId !== "") {
+ currentCategoryId.value = categoryId;
+ }
+ loading.value = true; // 开始加载
+ loadProductAPI(page.value, currentCategoryId.value).then((res) => {
+ finished.value = page.value > res.pages; // 当前页码超过总页数时表示加载完成
+ loading.value = false;
+ // 将获取的数据存入products
+ products.value.push(...res.data);
+ page.value++; // 页码+1
+ });
+ };
- /**
- * 加载products
- * @param {*} needReset 是否需要重置products
- * @param {*} categoryId 分类id
- */
- const onLoad = (needReset=false,categoryId='') => {
- if (needReset) {
- // 重置一些参数
- finished.value = false;
- products.value = [];
- page.value = 1;
- }
- // 分类id不为空才需要修改
- if (categoryId !=='' ) {
- currentCategoryId.value = categoryId;
- }
- loading.value = true; // 开始加载
- loadProductAPI(page.value, currentCategoryId.value).then((res) => {
- finished.value = page.value > res.pages; // 当前页码超过总页数时表示加载完成
- loading.value = false;
- // 将获取的数据存入products
- products.value.push(...res.data);
- page.value++; // 页码+1
- });
- };
-
- return {
- // page,
- loading,
- finished,
- products,
- currentCategoryId,
- onLoad,
- }
+ return {
+ // page,
+ loading,
+ finished,
+ products,
+ currentCategoryId,
+ onLoad,
+ };
};
-
diff --git a/Vite-Vue-tutorial/src/services/banners.js b/Vite-Vue-tutorial/src/services/banners.js
index ca8a87f..7779a14 100644
--- a/Vite-Vue-tutorial/src/services/banners.js
+++ b/Vite-Vue-tutorial/src/services/banners.js
@@ -2,6 +2,6 @@ import { get } from "../utils/request";
/**
* 获取轮播图
- * @returns
+ * @returns
*/
-export const loadBannersAPI = () => get('/api/v1/banners');
\ No newline at end of file
+export const loadBannersAPI = () => get("/api/v1/banners");
diff --git a/Vite-Vue-tutorial/src/services/categories.js b/Vite-Vue-tutorial/src/services/categories.js
index b3c8a02..a1a73ad 100644
--- a/Vite-Vue-tutorial/src/services/categories.js
+++ b/Vite-Vue-tutorial/src/services/categories.js
@@ -2,6 +2,6 @@ import { get } from "../utils/request";
/**
* 返回所有商品分类
- * @returns
+ * @returns
*/
-export const loadCategoriesAPI = () => get('api/v1/product_categories');
\ No newline at end of file
+export const loadCategoriesAPI = () => get("api/v1/product_categories");
diff --git a/Vite-Vue-tutorial/src/services/products.js b/Vite-Vue-tutorial/src/services/products.js
index 2d71d05..5688dc0 100644
--- a/Vite-Vue-tutorial/src/services/products.js
+++ b/Vite-Vue-tutorial/src/services/products.js
@@ -1,21 +1,21 @@
-import { get } from '../utils/request'
-
+import { get } from "../utils/request";
/**
* 获取商品信息
* @param {*} page 页号
* @param {*} category 分类,为空表示不分类
- * @returns
+ * @returns
*/
-export const loadProductAPI = (page = 1, category = '') => get('/api/v1/products/', {
- page,
- category,
- // per, 每页最多多少数据
-});
+export const loadProductAPI = (page = 1, category = "") =>
+ get("/api/v1/products/", {
+ page,
+ category,
+ // per, 每页最多多少数据
+ });
/**
* 返回商品详情
* @param {*} id 商品id
- * @returns
+ * @returns
*/
-export const loadProductByIdAPI = id => get('/api/v1/products/'+ id);
+export const loadProductByIdAPI = (id) => get("/api/v1/products/" + id);
diff --git a/Vite-Vue-tutorial/src/utils/request.js b/Vite-Vue-tutorial/src/utils/request.js
index dddb0c2..fccca06 100644
--- a/Vite-Vue-tutorial/src/utils/request.js
+++ b/Vite-Vue-tutorial/src/utils/request.js
@@ -1,13 +1,13 @@
-import axios from "axios"
-import NProgress from "nprogress"
-import "nprogress/nprogress.css"
+import axios from "axios";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
-export const serverUrl = "http://localhost:1337"
+export const serverUrl = "http://localhost:1337";
const instance = axios.create({
- baseURL: serverUrl, // baseURL会在发送请求的时候拼接在url参数的前面
- timeout: 5000, // 设置超时时间
-})
+ baseURL: serverUrl, // baseURL会在发送请求的时候拼接在url参数的前面
+ timeout: 5000, // 设置超时时间
+});
/**
* get 请求
@@ -17,9 +17,9 @@ const instance = axios.create({
*/
// axios.get(url, config)请求第二个参数表示配置信息(包括请求数据、请求头等)
export const get = (url, params) =>
- instance.get(url, {
- params: params, // url传递的参数
- })
+ instance.get(url, {
+ params: params, // url传递的参数
+ });
/**
* post 请求
@@ -28,7 +28,7 @@ export const get = (url, params) =>
* @returns
*/
// axios.post(url, data, config)请求第三个参数表示配置信息(包括请求数据、请求头等)
-export const post = (url, data) => instance.post(url, data)
+export const post = (url, data) => instance.post(url, data);
/**
* put 请求
@@ -36,41 +36,41 @@ export const post = (url, data) => instance.post(url, data)
* @param {*} data 数据
* @returns
*/
-export const put = (url, data) => instance.put(url, data)
+export const put = (url, data) => instance.put(url, data);
/**
* delete 请求
* @param {*} url 请求地址
* @returns
*/
-export const del = (url) => instance.delete(url)
+export const del = (url) => instance.delete(url);
// Add a request interceptor (全局请求拦截)
instance.interceptors.request.use(
- function (config) {
- // console.group("全局请求拦截");
- // console.log(config);
- // console.groupEnd();
- NProgress.start() // 启动进度条
- // 这里还可以设置token
- return config
- },
- function (error) {
- return Promise.reject(error)
- }
-)
+ function (config) {
+ // console.group("全局请求拦截");
+ // console.log(config);
+ // console.groupEnd();
+ NProgress.start(); // 启动进度条
+ // 这里还可以设置token
+ return config;
+ },
+ function (error) {
+ return Promise.reject(error);
+ }
+);
// Add a response interceptor (全局响应拦截)
instance.interceptors.response.use(
- function (response) {
- // console.group("全局响应拦截");
- // console.log(response);
- // console.groupEnd();
- NProgress.done() // 关闭进度条
- return response.data
- },
- function (error) {
- NProgress.done() // 关闭进度条
- return Promise.reject(error)
- }
-)
+ function (response) {
+ // console.group("全局响应拦截");
+ // console.log(response);
+ // console.groupEnd();
+ NProgress.done(); // 关闭进度条
+ return response.data;
+ },
+ function (error) {
+ NProgress.done(); // 关闭进度条
+ return Promise.reject(error);
+ }
+);
diff --git a/Vite-Vue-tutorial/src/utils/tools.js b/Vite-Vue-tutorial/src/utils/tools.js
index 830e378..c12447d 100644
--- a/Vite-Vue-tutorial/src/utils/tools.js
+++ b/Vite-Vue-tutorial/src/utils/tools.js
@@ -1,18 +1,17 @@
import { serverUrl } from "./request";
-
-export const extName = str => `【${str}】`;
+export const extName = (str) => `【${str}】`;
/**
* 处理返回数据中的url字段
* @param {*} url 请求返回的图片url
*/
-export const dalImageUrl = url => {
- if (url) {
- if (url.startsWith('http')) {
- return url;
- }
- return serverUrl + url;
- }
- return "https://hugo.bnblogs.cc/images/img/20220215001349.png";
-}
\ No newline at end of file
+export const dalImageUrl = (url) => {
+ if (url) {
+ if (url.startsWith("http")) {
+ return url;
+ }
+ return serverUrl + url;
+ }
+ return "https://hugo.bnblogs.cc/images/img/20220215001349.png";
+};
diff --git a/Vite-Vue-tutorial/src/views/Detail.vue b/Vite-Vue-tutorial/src/views/Detail.vue
index 075dd5b..ed313eb 100644
--- a/Vite-Vue-tutorial/src/views/Detail.vue
+++ b/Vite-Vue-tutorial/src/views/Detail.vue
@@ -1,21 +1,25 @@
-
-
+
+
-
{{ product.name }}
-
-
-
-
-
-
-
-
+
{{ product.name }}
+
+
+
+
+
+
+
+
diff --git a/Vite-Vue-tutorial/src/views/Home.vue b/Vite-Vue-tutorial/src/views/Home.vue
index 0206c0b..21040a8 100644
--- a/Vite-Vue-tutorial/src/views/Home.vue
+++ b/Vite-Vue-tutorial/src/views/Home.vue
@@ -21,7 +21,7 @@
:price="item.price.toFixed(2)"
:title="item.name"
:thumb="dalImageUrl(item.coverImage)"
- @click-thumb="toDetail(item.id)"
+ @click-thumb="toDetail(item.id)"
/>
@@ -38,7 +38,7 @@ import { useCategories } from "../hooks/useCategories";
import { useProducts } from "../hooks/useProducts";
// 获取第一页的商品数据
-const { products, onLoad} = useProducts();
+const { products, onLoad } = useProducts();
onLoad();
// 轮播图
@@ -54,14 +54,14 @@ const { categories } = useCategories();
// 跳转到详情页
const router = useRouter();
-const toDetail = id => {
- router.push({
- name: 'Detail',
- query: {
- id,
- }
- })
-}
+const toDetail = (id) => {
+ router.push({
+ name: "Detail",
+ query: {
+ id,
+ },
+ });
+};
diff --git a/Vite-Vue-tutorial/src/views/List.vue b/Vite-Vue-tutorial/src/views/List.vue
index 1b99738..ebf81df 100644
--- a/Vite-Vue-tutorial/src/views/List.vue
+++ b/Vite-Vue-tutorial/src/views/List.vue
@@ -1,32 +1,32 @@
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+