Add anaOptions Moduel

vuex_demo1/src/components/box.vue

@@ -1,24 +1,31 @@
 <template>
   <div>
-        <div>这是box组件，测试,test</div>
+    <h3>当前最新的count的值为：{{ count }}</h3>
     <button @click="divide(2)">除2</button>
-        <div>count的值为：{{count}}</div>
+    <ul>
+      精神语录列表：
+      <button @click="axiosGetAna">请求并添加语录</button>
+      <li v-for="i in analist" :key="i.id">{{ i.ana }}</li>
+    </ul>
   </div>
 </template>
 
 <script>
-import {mapState} from 'vuex'
+import { mapState,mapMutations,mapActions } from "vuex";
 export default {
   data() {
-        return{ }
+    return {};
   },
   methods: {
     divide(num) {
-            this.$store.commit('countOptions/divide',num)
-        }
+      this.$store.commit("countOptions/divide", num);
+    },
+    ...mapMutations("anaOptions",['addanalist']),
+    ...mapActions("anaOptions",['axiosGetAna'])
   },
   computed: {
-        ...mapState('countOptions',['count'])
-    }
-}
+    ...mapState("countOptions", ["count"]),
+    ...mapState("anaOptions", ["analist"]),
+  },
+};
 </script>

vuex_demo1/src/components/sub.vue

@@ -6,6 +6,7 @@
     <button @click="xc(10)">*10</button>
     <button @click="subNAsync(10)">-10 Async</button>
     <h3>{{ showNum1 }}</h3>
+    <h2>当前语录列表中的总条数为：{{ showListLength }}</h2>
   </div>
 </template>
 
@@ -13,15 +14,16 @@
 import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
 export default {
   data() {
-        return{ }
+    return {};
   },
   methods: {
-        ...mapMutations('countOptions',['subN','xc']),
-        ...mapActions('countOptions',['subNAsync']),
+    ...mapMutations("countOptions", ["subN", "xc"]),
+    ...mapActions("countOptions", ["subNAsync"]),
   },
   computed: {
-        ...mapState('countOptions',['count']),
-        ...mapGetters('countOptions',['showNum','showNum1'])
-    }
-}
+    ...mapState("countOptions", ["count"]),
+    ...mapGetters("countOptions", ["showNum", "showNum1"]),
+    ...mapGetters("anaOptions", ["showListLength"]),
+  },
+};
 </script>

vuex_demo1/src/store/ana.js

@@ -0,0 +1,36 @@
+import axios from 'axios';
+import {nanoid} from 'nanoid'
+export default{
+    namespaced: true,
+    state: {
+        analist:
+        [
+            {
+                'id':0,
+                ana:'花花世界迷人眼，没有实力别赛脸'
+            }
+        ],
+    },
+    mutations: {
+        addanalist(state,value){
+            state.analist.push(value)
+        }
+    },
+    actions:{
+        axiosGetAna(context){
+            axios.get('https://api.uixsj.cn/hitokoto/get?type=social')
+            .then(res=>{
+                context.commit('addanalist',
+                {
+                    id:nanoid(),
+                    ana:res.data
+                })
+            })
+        }
+    },
+    getters: {
+        showListLength(state){
+            return state.analist.length
+        }
+    }
+}

vuex_demo1/src/store/index.js

@@ -3,10 +3,12 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import countOptions from '@/store/count'
+import anaOptions from '@/store/ana'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
-    countOptions
+    countOptions,
+    anaOptions
   }
 })