对vuex一次小小的总结
当我们要用去使用一个东西时，首先要知道它是什么，用来干什么。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
之前用其他框架去写组件时，嵌套太深了，一直往里面传值太过于繁琐，而且去找一个状态太麻烦了
这种问题就是vuex官方所说的：遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏,多个视图依赖于同一状态，来自不同视图的行为需要变更同一状态
我对vuex理解就是一个数据仓库，相关的增删改查功能是全局性的，不用谁去通知谁，全都来告诉我就好了。
今天写了一个小demo
代码片段：
<div>
<span>name:</span><b>{{name}}</b><span>age:</span><b>{{age}}</b>from mapState里
</div>
<div>
<span>name:</span><b>{{nameGetter}}</b><span>age:</span><b>{{ageGetter}}</b> from mapGetters
</div>
<button @click="changeAge(10)">vue-mutations</button>
<button @click='actionChange'>vue-action</button>
<p>{{id}}<br>(mutations每次加10,action每次加5)</p>
<button @click="changeName('Mutations改名字')">Mutations改名字</button>
<button @click="actionChangeName('action改名字')">action改名字</button>
<p>(action修改2秒后执行)</p>
<div style="margin-top:50px">
<button @click="go">进入子路由</button>
</div>
<div>
<router-view></router-view>
</div>
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
