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(){
+  data() {
-        return{ }
+    return {};
   },
-    methods:{
+  methods: {
-        divide(num){
+    divide(num) {
-            this.$store.commit('countOptions/divide',num)
+      this.$store.commit("countOptions/divide", num);
-        }
     },
-    computed:{
+    ...mapMutations("anaOptions",['addanalist']),
-        ...mapState('countOptions',['count'])
+    ...mapActions("anaOptions",['axiosGetAna'])
-    }
+  },
-}
+  computed: {
+    ...mapState("countOptions", ["count"]),
+    ...mapState("anaOptions", ["analist"]),
+  },
+};
 </script>

vuex_demo1/src/components/sub.vue

@@ -1,27 +1,29 @@
 <!--moguyun-->
 <template>
   <div>
-        <h3>当前最新的count值为：{{count}}</h3>
+    <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>
+    <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(){
+  data() {
-        return{ }
+    return {};
   },
-    methods:{
+  methods: {
-        ...mapMutations('countOptions',['subN','xc']),
+    ...mapMutations("countOptions", ["subN", "xc"]),
-        ...mapActions('countOptions',['subNAsync']),
+    ...mapActions("countOptions", ["subNAsync"]),
   },
-    computed:{
+  computed: {
-        ...mapState('countOptions',['count']),
+    ...mapState("countOptions", ["count"]),
-        ...mapGetters('countOptions',['showNum','showNum1'])
+    ...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
   }
 })