對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