项目

vue/vue高阶/4.归纳.md

@@ -9,4 +9,47 @@ get 方法  一般用于获取数据信息
 post 方法 进行数据的传送 安全
 put
 delete
-...
+...
+
+## Vuex
+
+1.安装vuex 
+npm install vuex 
+yarn add vuex
+2.在main.js中将状态管理库进行引入
+
+
+vuex:
+1.state 存放读取数据
+在state对象中定义数据
+在需要使用的地方
+this.$store.state.xxx
+$store.state.xxx
+引入mapState对象  在computed中进行结构：...mapState(["xxx","xxx",...])
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+通过状态（数据源）集中管理驱动组件的变化。页面通过mapActions异步提交事件到actions。actions通过commit把对应参数同步提交到mutations。
+
+mutations会修改state中对于的值。 最后通过getters把对应值跑出去，在页面的计算属性中
+
+通过mapGetters来动态获取state中的值
+
+应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在actions中。
+
+state中保存着共有数据，数据是响应式的 getters可以对state进行计算操作，主要用来过滤一些数据，可以在多组件之间复用 mutations定义的方法动态修改state中的数据，通过commit提交方法，方法必须是同步的 actions将mutations里面处理数据的方法变成异步的，就是异步操作数据，通store.dispatch来分发actions，把异步的方法写在actions中，通过commit提交mutations，进行修改数据。
+
+modules：模块化vueX

vue/vue高阶/project3/package.json

@@ -11,7 +11,8 @@
     "axios": "^1.7.7",
     "core-js": "^3.8.3",
     "vue": "^2.6.14",
-    "vue-router": "3"
+    "vue-router": "3",
+    "vuex": "3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

vue/vue高阶/project3/src/main.js

@@ -4,11 +4,14 @@ import Vue from 'vue'
 import App from './App.vue'
 // 引入路由
 import router from './router'
+// 引入状态管理库
+import store from './store'
 // 规避生产环境报错
 Vue.config.productionTip = false
 // 实例化Vue
 new Vue({
   router,
+  store,
   // 渲染
   render: h => h(App),
   // 挂载到根节点上：public:index.html

vue/vue高阶/project3/src/store/index.js

@@ -0,0 +1,15 @@
+// 1.引入vue
+import Vue from 'vue';
+// 2.引入Vuex
+import Vuex from 'vuex';
+// 3.挂载状态管理库
+Vue.use(Vuex);
+// 4.抛出内容(新的状态实例)
+export default new Vuex.Store({
+    // 1.state 类似于页面中的data 存储数据
+    state:{
+        name:"Lucy",
+        age: 20,
+        sex: '女'
+    }
+})

vue/vue高阶/project3/src/views/Home.vue

@@ -1,14 +1,27 @@
 <template>
-    <div class="home">
-    主页
-    </div>
-  </template>
-  
-  <script>
-  export default {
-  
-  }
-  </script>
-  
-  <style>
-  </style>
+  <div class="home">
+    <h3>我叫：{{ name }}</h3>
+    <h3>今年：{{ $store.state.age }}岁</h3>
+    <h3>是个{{ sex }}孩</h3>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+  data() {
+    return {
+      obj1:{}
+    }
+  },
+  computed:{
+    ...mapState(["sex","name"])
+  },
+  created() {
+    console.log(this.$store.state, "this");
+    this.obj1 = this.$store.state;
+  },
+};
+</script>
+
+<style></style>

vue/vue高阶/project3/yarn.lock

@@ -5878,6 +5878,11 @@ vue@^2.6.14:
     "@vue/compiler-sfc" "2.7.16"
     csstype "^3.1.0"
 
+vuex@3:
+  version "3.6.2"
+  resolved "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+
 watchpack@^2.4.0, watchpack@^2.4.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.2.tgz#2feeaed67412e7c33184e5a79ca738fbd38564da"