From 37ca848bb69b6b84eac258c42d22a9dc0ee42d2b Mon Sep 17 00:00:00 2001
From: Miku-he <1319265705@qq.com>
Date: Fri, 10 Jun 2022 15:29:44 +0800
Subject: [PATCH] Add anaOptions Moduel

---
 vuex_demo1/src/components/box.vue | 41 +++++++++++++++++-------------
 vuex_demo1/src/components/sub.vue | 42 ++++++++++++++++---------------
 vuex_demo1/src/store/ana.js       | 36 ++++++++++++++++++++++++++
 vuex_demo1/src/store/index.js     |  4 ++-
 4 files changed, 85 insertions(+), 38 deletions(-)
 create mode 100644 vuex_demo1/src/store/ana.js

diff --git a/vuex_demo1/src/components/box.vue b/vuex_demo1/src/components/box.vue
index 63c1760..4a9cb47 100644
--- a/vuex_demo1/src/components/box.vue
+++ b/vuex_demo1/src/components/box.vue
@@ -1,24 +1,31 @@
 <template>
-    <div>
-        <div>这是box组件，测试,test</div>
-        <button @click="divide(2)">除2</button>
-        <div>count的值为：{{count}}</div>
-    </div>
+  <div>
+    <h3>当前最新的count的值为：{{ count }}</h3>
+    <button @click="divide(2)">除2</button>
+    <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{ }
+  data() {
+    return {};
+  },
+  methods: {
+    divide(num) {
+      this.$store.commit("countOptions/divide", num);
     },
-    methods:{
-        divide(num){
-            this.$store.commit('countOptions/divide',num)
-        }
-    },
-    computed:{
-        ...mapState('countOptions',['count'])
-    }
-}
+    ...mapMutations("anaOptions",['addanalist']),
+    ...mapActions("anaOptions",['axiosGetAna'])
+  },
+  computed: {
+    ...mapState("countOptions", ["count"]),
+    ...mapState("anaOptions", ["analist"]),
+  },
+};
 </script>
\ No newline at end of file
diff --git a/vuex_demo1/src/components/sub.vue b/vuex_demo1/src/components/sub.vue
index b613603..1fdbe96 100644
--- a/vuex_demo1/src/components/sub.vue
+++ b/vuex_demo1/src/components/sub.vue
@@ -1,27 +1,29 @@
 <!--moguyun-->
 <template>
-    <div>
-        <h3>当前最新的count值为：{{count}}</h3>
-        <button @click="subN(2)">-2</button>
-        <button @click="xc(10)">*10</button>
-        <button @click="subNAsync(10)">-10 Async</button>
-        <h3>{{showNum1}}</h3>
-    </div>
+  <div>
+    <h3>当前最新的count值为：{{ count }}</h3>
+    <button @click="subN(2)">-2</button>
+    <button @click="xc(10)">*10</button>
+    <button @click="subNAsync(10)">-10 Async</button>
+    <h3>{{ showNum1 }}</h3>
+    <h2>当前语录列表中的总条数为：{{ showListLength }}</h2>
+  </div>
 </template>
 
 <script>
-import { mapState,mapMutations,mapActions,mapGetters } from "vuex";
+import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
 export default {
-    data(){
-        return{ }
-    },
-    methods:{
-        ...mapMutations('countOptions',['subN','xc']),
-        ...mapActions('countOptions',['subNAsync']),
-    },
-    computed:{
-        ...mapState('countOptions',['count']),
-        ...mapGetters('countOptions',['showNum','showNum1'])
-    }
-}
+  data() {
+    return {};
+  },
+  methods: {
+    ...mapMutations("countOptions", ["subN", "xc"]),
+    ...mapActions("countOptions", ["subNAsync"]),
+  },
+  computed: {
+    ...mapState("countOptions", ["count"]),
+    ...mapGetters("countOptions", ["showNum", "showNum1"]),
+    ...mapGetters("anaOptions", ["showListLength"]),
+  },
+};
 </script>
\ No newline at end of file
diff --git a/vuex_demo1/src/store/ana.js b/vuex_demo1/src/store/ana.js
new file mode 100644
index 0000000..9eecb8f
--- /dev/null
+++ b/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
+        }
+    }
+}
\ No newline at end of file
diff --git a/vuex_demo1/src/store/index.js b/vuex_demo1/src/store/index.js
index 1a8cf1c..1460c03 100644
--- a/vuex_demo1/src/store/index.js
+++ b/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
   }
 })