commit

src/components/Footer.vue

@@ -4,10 +4,10 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-10 10:15:34
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-10 10:51:31
+ * @LastEditTime: 2022-03-10 13:25:51
 -->
 <template>
-  <div class="header-root">我是足部组件</div>
+  <div class="header-root">我是公共足部组件</div>
 </template>
 <script setup lang="ts">
 </script>

src/components/header.vue

@@ -4,11 +4,23 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-10 10:15:28
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-10 10:46:16
+ * @LastEditTime: 2022-03-10 14:58:15
 -->
 <template>
-  <div class="root">我是头部组件</div>
+  <div class="root">我是公共头部组件</div>
 </template>
 <script setup lang="ts">
+import { computed, onBeforeMount } from 'vue';
+import { useStore } from 'vuex';
+const store = useStore()
+
+
+onBeforeMount(() => {
+
+})
+computed(() => {
+  console.log(123);
+})
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+</style>

src/store/index.ts

@@ -4,20 +4,34 @@
  * @Author: Ruin 🍭
  * @Date: 2022-01-25 17:00:37
  * @LastEditors: 刘引
- * @LastEditTime: 2022-01-25 17:00:38
+ * @LastEditTime: 2022-03-10 15:55:57
  */
 import { createStore } from "vuex";
 export default createStore({
+  // 存放数据
   state: {
     userInfo: {
-      name: "yk",
+      name: "testVueX",
     },
   },
+  // 同步方法更改state中属性的状态
   mutations: {
     getUserInfo(state, name) {
-      state.userInfo.name = name;
+      state.userInfo.name = "我的值被改动";
+      console.log("vueX中的方法触发");
+    },
+    setAsyncInfo(state) {
+      state.userInfo.name = "setTimeOut";
     },
   },
-  actions: {},
+  // 异步调用mutations中的方法更改state状态 并不能直接更改
+  actions: {
+    setData(context) {
+      setTimeout(() => {
+        context.commit("setAsyncInfo");
+      }, 1000);
+    },
+  },
+  //state中的数据做过滤等简单处理
   getters: {},
 });

src/views/home/components/news.vue

@@ -4,5 +4,17 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-10 10:11:16
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-10 10:11:17
+ * @LastEditTime: 2022-03-10 17:51:03
 -->
+<template>
+  <div class="root">我是home组件的子组件news</div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+<style lang="scss" scoped>
+.content {
+  color: red;
+}
+</style>

src/views/home/index.vue

@@ -4,48 +4,18 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-10 10:11:06
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-10 13:02:31
+ * @LastEditTime: 2022-03-10 17:50:33
 -->
 <template>
   <div class="root-home">
-    <p>写一点demo玩一玩</p>
-    <el-button @click="getData()">{{ res }}</el-button>
-    <button @click="changeData()">更改值</button>
-    <div v-for="(item, index) in moreRes">{{ index }}==={{ item.title }}</div>
+    <p>我是home组件</p>
+    <el-button>按钮</el-button>
+    <news></news>
   </div>
 </template>
 <script setup lang="ts">
-import { onBeforeMount, onDeactivated, onMounted, onUpdated, reactive, ref } from 'vue';
-let res = ref('我是响应式数据')
-let moreRes = reactive([{ title: '我是复杂数据' }, { title: '我是复杂数据' }, { title: '我是复杂数据' }])
-const getData = () => {
-  console.log('出发一下');
-  moreRes[0].title = '123'
-  for (let i of moreRes) {
-    console.log(i);
-  }
-  // console.log(moreRes);
-}
-const changeData = () => {
-  res.value = '呵呵'
-  console.log(res.value);
-  console.log('触发');
-}
-// localStorage.setItem('key', res)
-
-onBeforeMount(() => {
-  console.log('dom渲染之前触发');
-})
-onMounted(() => {
-  console.log('dom渲染完毕时触发')
-})
-onUpdated(() => {
-  console.log('在界面数据更改时会触发');
-})
-onDeactivated(() => {
-  console.log('组件销毁时触发');
-})
-
+import { computed, watch, onUpdated, ref, reactive } from 'vue';
+import news from './components/news.vue'
 
 </script>
 

src/views/user/index.vue

@@ -4,17 +4,27 @@
  * @Author: Ruin 🍭
  * @Date: 2022-03-10 10:11:06
  * @LastEditors: 刘引
- * @LastEditTime: 2022-03-10 10:58:49
+ * @LastEditTime: 2022-03-10 16:05:04
 -->
 <template>
   <div class="root-home">
     <news></news>
+    <el-button @click="changeData()">更改值了</el-button>
     <h1>写一点demo玩一玩</h1>
+    {{ res }}
   </div>
 </template>
 
 <script setup lang="ts">
 import news from "./components/news.vue"
+import { useStore } from 'vuex';
+import { computed } from "vue";
+const store = useStore()
+let res: any = computed(() => store.state.userInfo.name)
+const changeData = () => {
+  store.dispatch('setData')
+}
+
 </script>
 
 <style lang="scss" scoped>