写一个简单的demo理解vuex

对vuex一次小小的总结

当我们要用去使用一个东西时，首先要知道它是什么，用来干什么。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
之前用其他框架去写组件时，嵌套太深了，一直往里面传值太过于繁琐，而且去找一个状态太麻烦了
这种问题就是vuex官方所说的：遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏,多个视图依赖于同一状态，来自不同视图的行为需要变更同一状态

我对vuex理解就是一个数据仓库，相关的增删改查功能是全局性的，不用谁去通知谁，全都来告诉我就好了。

今天写了一个小demo

代码片段：

   

        name:{{name}}age:{{age}}from   mapState里
      
      
 
      name:{{nameGetter}}age:{{ageGetter}} from mapGetters
      
     "changeAge(10)">vue-mutations 
      'actionChange'>vue-action
      
{{id}}
(mutations每次加10,action每次加5)
      "changeName('Mutations改名字')">Mutations改名字
       "actionChangeName('action改名字')">action改名字
       
(action修改2秒后执行)
      
"margin-top:50px"> 
         "go">进入子路由
      
      

       
      
复制代码

js

import other from "./other";
import { mapMutations, mapState, mapGetters, mapActions } from "vuex";//引入辅助函数
export default {
 data() {
   return {};
 },
 created() {},
 computed: {
   ...mapState(["id", "age", "obj", "name"]),   //把mapState理解成data
   ...mapGetters(["nameGetter", "ageGetter"]) //mapGetters相当于计算属性
 },
 methods: {
   go() {
     this.$router.push({ path: "/hello/123", component: other });
   },
   actionChange() {
     this.actionChangeAge(5);
   },
   ...mapMutations({
     changeAge: "changeAge",  //mapMutations 唯一提交方式，必须是同步函数
     changeName: "changeName"
   }),
   ...mapActions({
     actionChangeAge: "actionChangeAge",//Action提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作。
     actionChangeName: "actionChangeName"
   })
 }
};
复制代码

我的src是这样的：

index.js

state.js

getter.js

mutation.js

action.js

源码地址：https://github.com/hgchenhao/-vuex

转载于:https://juejin.im/post/5a434429518825094862ccca