项目

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

@@ -27,16 +27,29 @@ this.$store.state.xxx
 $store.state.xxx
 引入mapState对象  在computed中进行结构：...mapState(["xxx","xxx",...])
 
-
-
-
-
-
-
-
-
-
-
+2.getters 计算数据，类似于computed
+在getters对象中定义函数方法
+在需要使用的地方
+this.$store.getters.xxx
+$store.getters.xxx
+引入mapState对象  在computed中进行结构：...mapGetters(["xxx","xxx",...])
+
+3.mutations 同步操作
+定义方式与函数相同
+使用方式：
+1.this.$store.commit('调用的同步方法名称',传参)
+2.引入mapMutations对象
+在使用的位置前进行结构 ...mapMutations(["调用的同步方法名称"])
+this.调用的同步方法名称();
+
+
+4.Actions 异步操作
+定义方式：通过commit获取到同步的方法
+使用方式:
+this.$store.dispatch('调用的异步方法名称')
+
+在使用的位置前进行结构 ...mapActions(["调用的异步方法名称"])
+this.调用的异步方法名称();
 
 
 

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

@@ -0,0 +1,73 @@
+// // 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: "女",
+//     count: 1,
+//   },
+//   // getters 返还数据 类似于computed
+//   getters: {
+//     newCount(state) {
+//       return state.count;
+//     },
+//   },
+//   // 同步操作
+//   mutations: {
+//     addCount(state, num) {
+//       state.count = state.count + num;
+//     },
+//     reduceCount(state) {
+//       state.count -= 1;
+//     },
+//   },
+//   // 异步操作
+//   actions: {
+//     asyncReduce(context) {
+//       setTimeout(() => {
+//         context.commit("reduceCount");
+//       }, 2000);
+//     },
+//   },
+//   //模块化
+//   modules:{}
+// });
+const a = {
+     // 1.state 类似于页面中的data 存储数据
+  state: {
+    name: "Lucy",
+    age: 20,
+    sex: "女",
+    count: 1,
+  },
+  // getters 返还数据 类似于computed
+  getters: {
+    newCount(state) {
+      return state.count;
+    },
+  },
+  // 同步操作
+  mutations: {
+    addCount(state, num) {
+      state.count = state.count + num;
+    },
+    reduceCount(state) {
+      state.count -= 1;
+    },
+  },
+  // 异步操作
+  actions: {
+    asyncReduce(context) {
+      setTimeout(() => {
+        context.commit("reduceCount");
+      }, 2000);
+    },
+  },
+}

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

@@ -0,0 +1,33 @@
+
+const b = {
+    // 1.state 类似于页面中的data 存储数据
+ state: {
+   name: "Lucy",
+   age: 20,
+   sex: "女",
+   count: 1,
+ },
+ // getters 返还数据 类似于computed
+ getters: {
+   newCount(state) {
+     return state.count;
+   },
+ },
+ // 同步操作
+ mutations: {
+   addCount(state, num) {
+     state.count = state.count + num;
+   },
+   reduceCount(state) {
+     state.count -= 1;
+   },
+ },
+ // 异步操作
+ actions: {
+   asyncReduce(context) {
+     setTimeout(() => {
+       context.commit("reduceCount");
+     }, 2000);
+   },
+ },
+}

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

@@ -1,15 +1,41 @@
 // 1.引入vue
-import Vue from 'vue';
+import Vue from "vue";
 // 2.引入Vuex
-import Vuex from 'vuex';
+import Vuex from "vuex";
 // 3.挂载状态管理库
 Vue.use(Vuex);
 // 4.抛出内容(新的状态实例)
 export default new Vuex.Store({
-    // 1.state 类似于页面中的data 存储数据
-    state:{
-        name:"Lucy",
-        age: 20,
-        sex: '女'
-    }
-})
+  // 1.state 类似于页面中的data 存储数据
+  state: {
+    name: "Lucy",
+    age: 20,
+    sex: "女",
+    count: 1,
+  },
+  // getters 返还数据 类似于computed
+  getters: {
+    newCount(state) {
+      return state.count;
+    },
+  },
+  // 同步操作
+  mutations: {
+    addCount(state, num) {
+      state.count = state.count + num;
+    },
+    reduceCount(state) {
+      state.count -= 1;
+    },
+  },
+  // 异步操作
+  actions: {
+    asyncReduce(context) {
+      setTimeout(() => {
+        context.commit("reduceCount");
+      }, 2000);
+    },
+  },
+  //模块化
+  modules:{}
+});

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

@@ -3,11 +3,19 @@
     <h3>我叫：{{ name }}</h3>
     <h3>今年：{{ $store.state.age }}岁</h3>
     <h3>是个{{ sex }}孩</h3>
+    <h1>{{ $store.getters.newCount }}</h1>
+    <hr>
+    <h3>Getters:{{ newCount }}</h3>
+    <h2>State:{{ count }}</h2>
+    <button @click="addThing">增加</button>
+    <hr>
+    <button @click="reduceThing">减少</button>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+// import {mapMutations} from 'vuex';
+import { mapState,mapGetters,mapActions } from 'vuex';
 export default {
   data() {
     return {
@@ -15,12 +23,28 @@ export default {
     }
   },
   computed:{
-    ...mapState(["sex","name"])
+    ...mapState(["sex","name","count"]),
+    ...mapGetters(['newCount'])
   },
   created() {
-    console.log(this.$store.state, "this");
+    console.log(this)
+    console.log(this.$store.getters.newCount, "this");
     this.obj1 = this.$store.state;
   },
+  methods:{
+    addThing() {
+      console.log(this.$store)
+      this.$store.commit('addCount',20)
+    },
+    // ...mapMutations(['reduceCount']),
+    ...mapActions(['asyncReduce']),
+    reduceThing() {
+      this.asyncReduce();
+      // this.reduceCount()
+      // this.$store.commit('reduceCount')
+      // this.$store.dispatch('asyncReduce')
+    }
+  }
 };
 </script>