action

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue' // 自己的文件需要写路径
 import router from "./router/index.js"
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-// import axios from "axios"
+import axios from "axios"
 Vue.config.productionTip = false  // 阻止生产提示
 Vue.use(ElementUI);
 // Vue.use(axios) axios 不支持use引入
@@ -13,21 +13,7 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
   state: {
     count: 50,
-      list:[
+      list:[]
-          {
-              name:"aaa",
-              sex:"男"
-          },{
-              name:"bbb",
-              sex:"男"
-          },{
-              name:"ccc",
-              sex:"男"
-          },{
-              name:"ddd",
-              sex:"男"
-          },
-      ]
   },
   //  改变只能通过 mutations 不能直接赋值修改
   mutations: {
@@ -38,11 +24,32 @@ const store = new Vuex.Store({
       addlist(state,info){
           state.list.push(info)
           alert("添加成功")
+      },
+      setlist(state,list){
+          state.list = list
+          // 官方不推荐在mutations 里面使用 异步方法修改
+          // axios.get("http://127.0.0.1:3002/list").then((res)=>{
+          //     console.log(res)
+          //     state.list = res
+          //     // this.$store.commit("setlist",res)
+          // })
       }
-  }
+  },
+    actions:{
+      // 官方推荐有异步方法的写在这里面
+      getlist(c,a){
+          console.log(a)
+          axios.get("http://127.0.0.1:3002/list").then((res)=>{
+              console.log(res)
+              c.commit("setlist",res)
+              // state.list = res
+              // this.$store.commit("setlist",res)
+          })
+      }
+    }
 })
 
-
+// http://192.168.137.1:3002/list
 
 
 // 这个是创建一个新的axios 实例 他的baseURL是 传入的
@@ -64,7 +71,7 @@ const store = new Vuex.Store({
 // 消息内容 上级id openid
 
 //全局能添加 baseURL headers
-// Vue.prototype.axios = axios // 基于原型链安装 为Vue添加方法
+Vue.prototype.axios = axios // 基于原型链安装 为Vue添加方法
 Vue.prototype.globaldata = {}
 // vuex
 new Vue({

src/pages/list.vue

@@ -33,7 +33,14 @@ export default {
         list(){
             return this.$store.state.list
         }
-    }
+    },
+  mounted() {
+    //  调用mu里面的
+    // this.$store.commit("setlist")
+    // 调用action里面的
+    // action 使用异步方法获取完成后 在调用 mu里面的
+    this.$store.dispatch("getlist",123)
+  }
 }
 </script>