{"id":2944,"date":"2022-03-06T15:12:30","date_gmt":"2022-03-06T07:12:30","guid":{"rendered":"http:\/\/blog.odjbinail.cn\/?p=2944"},"modified":"2023-02-13T17:43:40","modified_gmt":"2023-02-13T09:43:40","slug":"%e9%a1%b9%e7%9b%ae%e5%ae%9e%e6%88%98%ef%bc%9avue-js%e4%bb%bf%e4%ba%ac%e4%b8%9c%e5%88%b0%e5%ae%b6%e7%94%b5%e5%95%86%e5%85%a8%e6%a0%88%e9%a1%b9%e7%9b%ae%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=2944","title":{"rendered":"Vue.js\u4eff\u4eac\u4e1c\u5230\u5bb6\u7535\u5546\u5168\u6808\u9879\u76ee-\u524d\u7aef\u5f00\u53d1"},"content":{"rendered":"<h1>\u9879\u76ee\uff1a\u4eff\u4eac\u4e1c\u5230\u5bb6\u9996\u9875\u5f00\u53d1<\/h1>\n<ul>\n<li>\n<p>\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install --registry=<a href=\"https:\/\/registry.npm.taobao.org\">https:\/\/registry.npm.taobao.org<\/a>## \u5de5\u7a0b\u521d\u59cb\u5316<\/p>\n<p>cmd \u4e00\u4e2a\u6587\u4ef6\u5939<\/p>\n<\/li>\n<li>vue create myproject<\/li>\n<li>Manually select features<\/li>\n<li>Babel Router Vuex CSS Pre-processors Linter \/ Formatter<\/li>\n<li>3.x<\/li>\n<li>n<\/li>\n<li>Sass\/SCSS (with dart-sass)<\/li>\n<li>ESLint + Standard config<\/li>\n<li>Lint on save<\/li>\n<li>In dedicated config files<\/li>\n<li>n<\/li>\n<li>npm<\/li>\n<li>\u56de\u8f66<\/li>\n<li>\u6253\u5f00 myproject \u9879\u76ee,\u5c06.git .gitignore \u5220\u9664<\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030313461890.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030313461890.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u5de5\u7a0b\u76ee\u5f55\u4ee3\u7801\u7b80\u4ecb\u53ca\u6574\u7406<\/h2>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030313551145.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030313551145.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\n<p>\u5b89\u88c5\u63d2\u4ef6 ESLint \/ Vetur ESLint : \u63d0\u793a\u8bed\u6cd5,\u8bed\u6cd5\u6821\u9a8c,\u7b26\u5408\u89c4\u8303 Vetur : \u8bc6\u522b Vue \u4e0a\u7684\u8bed\u6cd5,\u8ba9\u6587\u4ef6\u9ad8\u4eae\u663e\u793a<\/p>\n<\/li>\n<li>\n<p>node_modules \u653e\u7684\u4e00\u4e9b\u4f9d\u8d56\u5305 \u83b7\u53d6 : npm install \u5b89\u88c5\u4f9d\u8d56<\/p>\n<\/li>\n<li>\n<p>public : \u5b58\u653e\u7684\u662f\u9ed8\u8ba4\u7684 html \u6a21\u677f<\/p>\n<\/li>\n<li>\n<p>.editorconfig : \u7f16\u8f91\u5668\u7684\u4e00\u4e9b\u9ed8\u8ba4\u914d\u7f6e<\/p>\n<\/li>\n<li>\n<p>babel.config.js : vue \u7684\u4e00\u4e9b\u7528\u5230 babel \u7684\u914d\u7f6e<\/p>\n<\/li>\n<li>\n<p>package.json : \u5b58\u653e\u7684\u662f\u4e00\u4e9b\u4f9d\u8d56\u5305<\/p>\n<\/li>\n<li>\n<p>package-lock.json : \u4fdd\u8bc1\u591a\u4eba\u534f\u4f5c,\u5b89\u88c5\u4f9d\u8d56\u6709\u56fa\u5b9a\u7684\u7248\u672c<br \/>\nsrc \u76ee\u5f55 : (\u6e90\u4ee3\u7801\u76ee\u5f55)<\/p>\n<\/li>\n<li>\n<p>\u5165\u53e3\u6587\u4ef6 : main.js<\/p>\n<\/li>\n<li>\n<p>\u5c06 App.vue \u6539\u6210<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n  &lt;router-view\/&gt;\n&lt;\/template&gt;<\/code><\/pre>\n<ul>\n<li>\u5c06 asstes component \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86<\/li>\n<li>\u5c06 router-&gt;index.js \u2193\u5220\u6389 import HomeView from \\'..\/views\/HomeView.vue\\'<\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030314191670.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030314191670.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\u5c06 views \u7684\u5185\u5bb9\u6587\u4ef6\u5220\u4e86<\/li>\n<\/ul>\n<h2>\u57fa\u7840\u6837\u5f0f\u96c6\u6210\u53ca\u5f00\u53d1\u6a21\u62df\u5668\u7684\u4f7f\u7528<\/h2>\n<p>\u4e3a\u4e86\u8ba9\u6211\u4eec\u7684\u6837\u5f0f\u5728\u6240\u6709\u6d4f\u89c8\u5668\u4e0a\u4fdd\u6301\u4e00\u81f4 npm install normalize.css@8.0.1 --save<\/p>\n<ul>\n<li>main.js : import \\'normalize.css\\'<\/li>\n<li>\u5728 src \u4e2d\u521b\u5efa style\/base.css html{ font-size: 100px; } \/\/ 1rem=html font-size<\/li>\n<\/ul>\n<h2>flex + iconfont \u5b8c\u6210\u9996\u9875 docker \u6837\u5f0f\u7f16\u5199<\/h2>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030314511355.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030314511355.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>style -&gt; iconfont.css<\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030314523993.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030314523993.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>style -&gt; index.scss : @import \\'.\/base.scss\\'; @import \\'.\/iconfont.css\\';<\/li>\n<li>main.js : import \\'.\/style\/index.scss\\'<\/li>\n<\/ul>\n<h2>\u4f7f\u7528 Scss \u7ec4\u7ec7\u5730\u5740\u533a\u57df\u5e03\u5c40<\/h2>\n<ul>\n<li>style -&gt; viriables.scss $content-fontcolor:#333; \u5728\u9700\u8981\u7684\u5730\u65b9: \u6539\u6210 color: $content-fontcolor;<\/li>\n<li>style -&gt; mixins.scss<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u6587\u5b57\u591a,\u5c55\u793a...\n@mixin ellipsis {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n}<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>App.vue\n&lt;style lang=&quot;scss&quot;&gt;\n@import &quot;.\/style\/viriables.scss&quot;;\n@import &quot;.\/style\/mixins.scss&quot;;\n.position {\n...\n @include ellipsis;\n  .position_icon {\n  ...\n  }<\/code><\/pre>\n<h2>\u5229\u7528 CSS \u6280\u5de7\u5b9e\u73b0\u641c\u7d22\u53ca banner \u533a\u57df\u5e03\u5c40<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;div class=&quot;banner&quot;&gt;\n      &lt;img\n        class=&quot;banner_img&quot;\n        src=&quot;http:\/\/www.dell-lee.com\/imgs\/vue3\/banner.jpg&quot;\n      \/&gt;\n    &lt;\/div&gt;\n\/\/\u9632\u6b62\u56fe\u7247\u52a0\u8f7d\u65f6,\u4e0b\u65b9\u6587\u5b57\u6296\u52a8\n\/\/ \u9ad8\u5bbd\u6bd4\n.banner {\n  height: 0;\n  overflow: hidden;\n  padding-bottom: 25.4%;\n  &amp;_img {\n    width: 100%;\n  }\n}<\/code><\/pre>\n<h2>\u4f7f\u7528 flex \u5e03\u5c40\u5b9e\u73b0\u56fe\u6807\u5217\u8868\u5e03\u5c40<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/flex-wrap:wrap; \u6362\u884c\n.icons{\n  display: flex;\n  flex-wrap:wrap;\n  margin-top: .16rem;\n  &amp;_item{\n    width: 20%;\n    &amp;_img{\n      display: block;\n      width: .4rem;\n      height: .4rem;\n      margin: 0 auto;\n    }\n    &amp;_desc{\n      margin: .06rem 0 .16rem 0;\n      text-align: center;\n      color: $content-fontcolor;\n    }\n  }\n}\n.gap{\n  \/\/\u5de6\u53f3\u9876\u683c\n  margin: 0 -.18rem;\n  height: .1rem;\n  background:$content-bgColor;\n}<\/code><\/pre>\n<h2>\u9996\u9875\u5e03\u5c40\u6536\u5c3e<\/h2>\n<h2>\u9996\u9875\u7ec4\u4ef6\u7684\u5408\u7406\u62c6\u5206<\/h2>\n<h2>\u4f7f\u7528 v-for, v-html \u6307\u4ee4\u7cbe\u7b80\u9875\u9762\u4ee3\u7801.mp4<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;template&gt;\n  &lt;div class=&quot;docker&quot;&gt;\n    &lt;span v-for=&quot;(item, index) in dockerList&quot;\n          :class=&quot;{&#039;docker_item&#039;:true,&#039;docker_item-active&#039;:index===0}&quot;\n          class=&quot;docker_item &quot;\n          :key=&quot;item.icon&quot;&gt;\n      &lt;div class=&quot;iconfont&quot;\n           v-html=&quot;item.icon&quot; \/&gt;\n      &lt;div class=&quot;docker_title&quot;&gt;{{item.text}}&lt;\/div&gt;\n    &lt;\/span&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nexport default {\n  name: &#039;DockerD&#039;,\n  setup () {\n    const dockerList = [\n      { icon: &#039;&amp;#xe603;&#039;, text: &#039;\u9996\u9875&#039; },\n      { icon: &#039;&amp;#xe7e5;&#039;, text: &#039;\u8d2d\u7269\u8f66&#039; },\n      { icon: &#039;&amp;#xe601;&#039;, text: &#039;\u8ba2\u5355&#039; },\n      { icon: &#039;&amp;#xe660;&#039;, text: &#039;\u6211\u7684&#039; }\n    ]\n    return { dockerList }\n  }\n}\n&lt;\/script&gt;<\/code><\/pre>\n<h2>CSS \u4f5c\u7528\u57df\u7ea6\u675f\u4ee5\u53ca Vue \u5f00\u53d1\u8005\u5de5\u5177\u7684\u5b89\u88c5\u4f7f\u7528<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;style lang=&quot;scss&quot; scoped&gt;\/\/scoped \u8fd9\u4e2a\u6837\u5f0f\u53ea\u5bf9\u8fd9\u4e2a\u7ec4\u4ef6\u6709\u6548,,\u9650\u5236 css \u4f5c\u7528\u8303\u56f4<\/code><\/pre>\n<ul>\n<li>Chrome \u6dfb\u52a0\u6269\u5c55 Vue.js devtools<\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030411163780.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022030411163780.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u767b\u5f55\u9875\u9762\u5e03\u5c40\u5f00\u53d1<\/h2>\n<h2>\u8def\u7531\u5b88\u536b\u5b9e\u73b0\u57fa\u7840\u767b\u9646\u6821\u9a8c\u529f\u80fd<\/h2>\n<ul>\n<li>src\\router\\index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>router.beforeEach((to, from, next) =&gt; {\n  const { isLogin } = localStorage;\n  (!isLogin &amp;&amp; (to.name !== &#039;Login&#039; &amp;&amp; to.name !== &#039;Register&#039;)) ? next({ name: &#039;Login&#039; }) : next()\n})<\/code><\/pre>\n<h2>\u6ce8\u518c\u9875\u9762\u5f00\u53d1\u53ca\u8def\u7531\u4e32\u8054\u590d\u4e60<\/h2>\n<ul>\n<li>src\\router\\index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> {\n    path: &#039;\/login&#039;,\n    name: &#039;Login&#039;,\n    component: Login,\n    \/\/ \u767b\u5f55\u5230\u9996\u9875\u540e,\u5730\u5740 login,\u4f1a\u8df3\u8f6c\u5230\u9996\u9875,\u4e0d\u4f1a\u8df3\u8f6c login \u9875\u9762\n    beforeEnter (to, from, next) {\n      const isLogin = localStorage.isLogin\n      isLogin ? next({ name: &#039;Home&#039; }) : next()\n    }\n  }<\/code><\/pre>\n<h2>\u4f7f\u7528 axios \u53d1\u9001\u767b\u5f55 Mock \u8bf7\u6c42<\/h2>\n<h2>\u8bf7\u6c42\u51fd\u6570\u7684\u5c01\u88c5<\/h2>\n<pre class=\"prettyprint linenums\" ><code>    &lt;input class=&quot;wrapper_input_content&quot;\n             placeholder=&quot;\u8bf7\u8f93\u5165\u7528\u6237\u540d&quot;\n             v-model=&quot;data.username&quot; \/&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>import { useRouter } from &#039;vue-router&#039;\nimport axios from &#039;axios&#039;\nimport { reactive } from &#039;vue&#039;\nexport default {\n  name: &#039;LoginL&#039;,\n  setup () {\n    const data = reactive({\n      username: &#039;&#039;,\n      password: &#039;&#039;\n    })\n    \/\/ \u6d4b\u8bd5\u65f6\u671f,\u70b9\u767b\u5f55,\u8df3\u8f6c\u5230\u9996\u9875\n    const router = useRouter()\n    const handleLogin = async () =&gt; {\n      try {\n        const result = await post(&#039;\/api\/user\/login&#039;, {\n          username: data.username,\n          password: data.password\n        })\n        if (result?.errno === 0) {\n          localStorage.isLogin = true\n          router.push({ name: &#039;Home&#039; })\n        } else {\n          alert(&#039;\u767b\u5f55\u5931\u8d25&#039;)\n        }\n      } catch (e) {\n        alert(&#039;\u8bf7\u6c42\u5931\u8d25&#039;)\n      }\n    }\n    const handleRegisterClick = () =&gt; {\n      router.push({ name: &#039;Register&#039; })\n    }\n    return { handleLogin, handleRegisterClick, data }\n  }\n}<\/code><\/pre>\n<ul>\n<li>src-&gt;utils-&gt;request.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import axios from &#039;axios&#039;\nexport const post = (url, data = {}) =&gt; {\n  return new Promise((resolve, reject) =&gt; {\n    axios.post(url, data, {\n      baseURL: &#039;https:\/\/www.fastmock.site\/mock\/ae8e9031947a302fed5f92425995aa19\/jd&#039;,\n      headers: {\n        &#039;Content-Type&#039;: &#039;application\/json&#039;\n      }\n    }).then((response) =&gt; {\n      resolve(response.data)\n    }, err =&gt; {\n      reject(err)\n    })\n  })\n}<\/code><\/pre>\n<h1>\u9879\u76ee\uff1a\u4eff\u4eac\u4e1c\u5230\u5bb6\u5546\u5bb6\u8be6\u60c5\u5f00\u53d1<\/h1>\n<h2>\u9996\u9875\u9644\u8fd1\u5e97\u94fa\u6570\u636e\u52a8\u6001\u5316<\/h2>\n<h2>\u52a8\u6001\u8def\u7531\uff0c\u5f02\u6b65\u8def\u7531\u4e0e\u7ec4\u4ef6\u62c6\u5206\u590d\u7528<\/h2>\n<ul>\n<li>router-&gt;index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  const routes = [\n  {\n  path: &#039;\/&#039;,\n  name: &#039;Home&#039;,\n  component: () =&gt; import(\/* webpackChunkName: &quot;home&quot; *\/ &#039;..\/views\/home\/Home&#039;)\n  },<\/code><\/pre>\n<ul>\n<li>components-&gt;ShopInfo.vue<\/li>\n<li>views-&gt;shop-&gt;ShopS.vue<\/li>\n<li>views-&gt;home-&gt;Nearby.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>    &lt;ShopInfo v-for=&quot;item in nearbyList&quot;\n              :key=&quot;item._id&quot;\n              :item=&quot;item&quot;\n              \/&gt;\n\nimport ShopInfo from &#039;..\/..\/components\/ShopInfo&#039;\nexport default {\n  name: &#039;NearBy&#039;,\n  components: { ShopInfo },<\/code><\/pre>\n<h2>\u641c\u7d22\u5e03\u5c40\u53ca\u8def\u7531\u8df3\u8f6c<\/h2>\n<p>views-&gt;shop-&gt;ShopS.vue views-&gt;home-&gt;Nearby.vue<\/p>\n<h1>\u8d2d\u7269\u8f66\u529f\u80fd\u5f00\u53d1<\/h1>\n<h2>Vuex \u4e2d\u8d2d\u7269\u8f66\u6570\u636e\u7ed3\u6784\u7684\u8bbe\u8ba1<\/h2>\n<ul>\n<li>\n<p>\u5b9e\u73b0\u5404\u5546\u5e97\u5546\u54c1\u52a0\u4e00, \u6bcf\u4e2a\u5546\u5e97\u7684\u5546\u54c1\u4e92\u4e0d\u5f71\u54cd<\/p>\n<\/li>\n<li>\n<p>shop\/Content.vue<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> &lt;span\n              class=&quot;product_number_plus&quot;\n              @click=&quot;()=&gt;{changeCartItemInfo(shopId,item._id,item,1)}&quot;\n          &gt;+&lt;\/span&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u8d2d\u7269\u8f66\u76f8\u5173\u903b\u8f91\nconst userCartEffect = () =&gt; {\n  const store = useStore();\n  const cartList = toRefs(store.state).cartList;\n  const changeCartItemInfo = (shopId, productId, productInfo,num) =&gt; {\n    store.commit(&quot;changeCartItemInfo&quot;, {shopId, productId, productInfo,num});\n\n  };\n  return {cartList, changeCartItemInfo};\n};<\/code><\/pre>\n<ul>\n<li>store\/index<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  mutations: {\n    changeCartItemInfo(state, payload) {\n      const {shopId, productId,productInfo} = payload;\n      let shopInfo = state.cartList[shopId];\n      if (!shopInfo) {\n        shopInfo = {};\n      }\n      let product=shopInfo[productId]\n      if (!product) {\n        product = productInfo;\n        product.count=0\n      }\n      product.count=product.count+payload.num\n      if(product.count&lt;0){\n        product.count=0\n      }\n      shopInfo[productId]=product\n      state.cartList[shopId]=shopInfo\n    }\n  },<\/code><\/pre>\n<h2>\u4f7f\u7528 computed \u5b8c\u6210\u8ba2\u5355\u4ef7\u683c\u8ba1\u7b97<\/h2>\n<ul>\n<li>shop\/Cart.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>&lt;div class=&quot;check__icon__tag&quot;&gt;{{ total }}&lt;\/div&gt;\n&lt;div class=&quot;check__info&quot;&gt;\n        \u603b\u8ba1\uff1a&lt;span class=&quot;check__info__price&quot;&gt;\u00a5 {{ price }}&lt;\/span&gt;\n      &lt;\/div&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>import {computed} from &quot;vue&quot;;\nimport {useStore} from &quot;vuex&quot;;\nimport {useRoute} from &quot;vue-router&quot;;\n\n\/\/\u83b7\u53d6\u8d2d\u7269\u8f66\u4fe1\u606f\u903b\u8f91\nconst useCartEffect = () =&gt; {\n  const store = useStore();\n  const route = useRoute();\n  const shopId = route.params.id;\n  const cartList = store.state.cartList;\n  const total = computed(() =&gt; {\n    const productList = cartList[shopId];\n    let count = 0;\n    if (productList) {\n      for (let i in productList) {\n        const product = productList[i];\n        count += product.count;\n      }\n    }\n\n    return count;\n\n  });\n  const price = computed(() =&gt; {\n    const productList = cartList[shopId];\n    let count = 0;\n    if (productList) {\n      for (let i in productList) {\n        const product = productList[i];\n        count += (product.count * product.price);\n      }\n    }\n\n    return count.toFixed(2);\n\n  });\n  return {total, price};\n};\n\nexport default {\n  name: &quot;Cart&quot;,\n  setup() {\n    const {total, price} = useCartEffect();\n    return {total, price};\n  }\n};<\/code><\/pre>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/202212230033295.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/202212230033295.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u8d2d\u7269\u8f66\u53ca\u5217\u8868\u53cc\u5411\u6570\u636e\u540c\u6b65\u529f\u80fd\u5f00\u53d1<\/h2>\n<ul>\n<li>src\/views\/shop\/commonCartEffect.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import { useStore } from &#039;vuex&#039;\nimport {toRefs} from &quot;vue&quot;;\n\n\/\/\u8d2d\u7269\u8f66\u76f8\u5173\u903b\u8f91\nexport const useCommonCartEffect = () =&gt; {\n  const store = useStore();\n  const cartList = toRefs(store.state).cartList;\n  const changeCartItemInfo = (shopId, productId, productInfo,num) =&gt; {\n    store.commit(&quot;changeCartItemInfo&quot;, {shopId, productId, productInfo,num});\n\n  };\n  return {cartList, changeCartItemInfo};\n};<\/code><\/pre>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022122911165831.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/03\/2022122911165831.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u6839\u636e\u8d2d\u7269\u8f66\u9009\u4e2d\u72b6\u6001\u8ba1\u7b97\u8ba2\u5355\u91d1\u989d<\/h2>\n<ul>\n<li>src\/views\/shop\/Cart.vue<\/li>\n<li>src\/store\/index.js<\/li>\n<\/ul>\n<h2>\u5168\u9009\u53ca\u6e05\u7a7a\u8d2d\u7269\u8f66\u7684\u529f\u80fd\u5b9e\u73b0<\/h2>\n<ul>\n<li>src\/views\/shop\/commonCartEffect.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  const cartList=store.state.cartList\n  return {cartList};<\/code><\/pre>\n<ul>\n<li>\n<p>src\/views\/shop\/Content.vue \u5bfc\u5165 cartList<\/p>\n<\/li>\n<li>\n<p>\u5168\u9009<\/p>\n<\/li>\n<li>\n<p>src\/store\/index.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  setCartItemsChecked(state,payload){\n      const {shopId} = payload;\n      const products = state.cartList[shopId];\n      if (products){\n        for (let key in products){\n          const product=products[key]\n          product.check=true\n        }\n      }\n    }<\/code><\/pre>\n<ul>\n<li>src\/views\/shop\/Cart.vue<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> &lt;div class=&quot;product_header_all&quot; @click=&quot;()=&gt;setCartItemsChecked(shopId)&quot;&gt;\n          &lt;span\n              class=&quot;product_header_icon iconfont&quot;\n              v-html=&quot;allChecked?&#039;&amp;#xe618;&#039;:&#039;&amp;#xe66c;&#039;&quot;&gt;&lt;\/span&gt;\n          \u5168\u9009\n        &lt;\/div&gt;<\/code><\/pre>\n<h2>\u5546\u5bb6\u8be6\u60c5\u9875\u9762\u4ee3\u7801\u4f18\u5316<\/h2>\n<h2>\u8d2d\u7269\u8f66\u6570\u636e\u7ed3\u6784\u7684\u53d8\u66f4<\/h2>\n<h2>\u901a\u8fc7 LocalStorage \u5b9e\u73b0\u8d2d\u7269\u8f66\u4fe1\u606f\u6301\u4e45\u5b58\u50a8<\/h2>\n<h1>\u786e\u8ba4\u8ba2\u5355\u5546\u54c1\u5217\u8868\u6570\u636e\u83b7\u53d6\u4e0e\u5e03\u5c40<\/h1>\n<h2>\u9875\u9762\u5e03\u5c40\u53ca\u5c55\u793a\u903b\u8f91\u5f00\u53d1<\/h2>\n<ul>\n<li>\u786e\u8ba4\u8ba2\u5355\u9875\u9762\u540e\u9000\u8fd4\u56de\u6309\u94ae<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> &lt;div\n            class=&quot;iconfont top_header_back&quot;\n            @click=&quot;handleBackClick&quot;\n        &gt;&amp;#xe600;&lt;\/div&gt;\n\n    const router = useRouter();\n    const handleBackClick=()=&gt;{router.back()}<\/code><\/pre>\n<h2>\u786e\u8ba4\u8ba2\u5355\u9875\u9762\u7ec4\u4ef6\u62c6\u5206\u53ca\u5f39\u6846\u5e03\u5c40\u5236\u4f5c<\/h2>\n<h2>\u8d2d\u7269\u6d41\u7a0b\u5f00\u53d1\u5b8c\u6210<\/h2>\n<h2>\u8ba2\u5355\u5217\u8868\u9875\u5e03\u5c40\u903b\u8f91\u5f00\u53d1<\/h2>\n<ul>\n<li>src\/views\/orderList\/OrderList.vue<\/li>\n<\/ul>\n<h1>\u771f\u673a\u8c03\u8bd5\u53ca\u5de5\u7a0b\u53d1\u5e03\u6d41\u7a0b<\/h1>\n<h2>\u5982\u4f55\u8fdb\u884c\u771f\u673a\u8c03\u8bd5<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>\u9879\u76ee\uff1a\u4eff\u4eac\u4e1c\u5230\u5bb6\u9996\u9875\u5f00\u53d1 \u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install &#8211;registry=https:\/\/reg [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2944","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2944"}],"version-history":[{"count":36,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2944\/revisions"}],"predecessor-version":[{"id":4095,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2944\/revisions\/4095"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}