什么是Vuex
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理庫。
安裝和引入vuex
- 安裝
yarn add vuex
- 引入
一般將項(xiàng)目應(yīng)用級(jí)的狀態(tài)都放到store中統(tǒng)一管理，項(xiàng)目新建一個(gè)store文件夾，這個(gè)里面存放所需的狀態(tài)
//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
count:0
},
getters:{},
mutations:{},
actions:{}
})
export default store
定義好store后再main.js中引用
//main.js
import Vue from "vue";
import App from "./App.vue";
+ import store from "./store";
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
+ store,
}).$mount("#app");
核心概念
-
State
State中存儲(chǔ)公共數(shù)據(jù)。例如組件A和組件B共同用到的數(shù)據(jù)count，在組件A中修改count的值，組件B中count會(huì)隨之更改
- 如何使用？兩種方式:
- 在模版中使用$store.state.count
//store中定義count
const store = new Vuex.Store({
state: {
count: 1,
},
getters: {
},
mutations: {},
actions: {},
});
//模版中使用$store.state.count
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<div>{{ $store.state.count }}</div>
</div>
</template>
- 在計(jì)算屬性computed中使用
- 在compute中定義
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<div>{{ count }}</div>
</div>
</template>
<script>
export default {
name: "App",
computed: {
count(){
return this.$store.state.count
}
},
};
</script>
- 借助mapState輔助函數(shù)
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<div>{{ count }}</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
name: "App",
computed: {
...mapState(["count"]),
},
};
</script>
-
Getters
存放從State中派生的一些狀態(tài)數(shù)據(jù)，相當(dāng)于State的計(jì)算屬性，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。
- 如何使用？兩種方式:
- 在模版中使用$store.getters.newCount
//store中定義
const store = new Vuex.Store({
state: {
count: 1,
},
getters: {
newCount: (state) => {
return state.count * 2;
},
},
mutations: {},
actions: {},
});
//模版中使用
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<div>{{ $store.state.newCount}}</div>
<div>{{ $store.getters.newCount}}</div>
</div>
</template>
- 使用mapGetters輔助函數(shù)
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<!-- <div>{{ $store.state.count }}</div> -->
<div>{{ count }}</div>
<div>{{ newCount }}</div>
</div>
</template>
<script>
import { mapState,mapGetters } from "vuex";
export default {
name: "App",
computed: {
...mapState(["count"]),
...mapGetters(["newCount"]),
},
};
</script>
-
Mutations
修改State的數(shù)據(jù)唯一方法就是commit一個(gè)mution中的方法,修改state時(shí)要調(diào)用store.commit(state,payload)提交一個(gè)payload來更改
- 如何使用？兩種方式:
- 調(diào)用store.commit
//store中
const store = new Vuex.Store({
state: {
count: 1,
},
getters: {
newCount: (state) => state.count * 2,
},
mutations: {
addCount(state, payload) {
setTimeout(() => {
payload;
state.count++;
},1000);
},
},
actions: {},
});
//模版中
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<div>{{ count }}</div>
<div>
<button @click="handleClick">提交</button>
</div>
<div>{{ newCount }}</div>
</div>
</template>
<script>
import { mapState, mapGetters,} from "vuex";
export default {
name: "App",
methods: {
handleClick() {
this.$store.commit({
type: "addCount",
num: parseInt(Math.random() * 10),
});
},
},
computed: {
...mapState(["count"]),
...mapGetters(["newCount"]),
},
};
</script>
- 使用mapMutations輔助函數(shù)
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<div>{{ count }}</div>
<div>
<button @click="addCount">提交</button>
</div>
<div>{{ newCount }}</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
name: "App",
methods: {
...mapMutations(["addCount"]),
handleClick() {
this.addCount(Math.random() * 10)
},
},
computed: {
...mapState(["count"]),
...mapGetters(["newCount"]),
},
};
</script>
注意：mutation必須是同步函數(shù)
-
Actions
Actions和Mutations相似，不同的是：
- Actions提交的是一個(gè)mutation,而不是直接改變state
- Actions可以提交異步操作
- 如何使用？兩種方式:
- 調(diào)用store.dispatch
//store中
const store = new Vuex.Store({
state: {
count: 1,
},
getters: {
newCount: (state) => state.count * 2,
},
mutations: {
addCount(state, payload) {
state.count += payload.num;
},
},
actions: {
addCountAsync(context) {
setTimeout(() => {
const { commit } = context;
commit("addCount", { num: 1 });
});
},
},
});
//template中
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<div>{{ count }}</div>
<div>
<button @click="action">action</button>
</div>
<div>{{ newCount }}</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
name: "App",
methods: {
action() {
this.$store.dispatch("addCountAsync", { num: 1 });
},
},
computed: {
...mapState(["count"]),
...mapGetters(["newCount"]),
},
};
</script>
- 使用mapActions輔助函數(shù)
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<div>{{ count }}</div>
<div>
<button @click="action">action</button>
</div>
<div>{{ newCount }}</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
name: "App",
methods: {
...mapMutations(["addCount"]),
...mapActions(["addCountSync"]),
handleClick() {
// this.addCount({ num: parseInt(Math.random() * 10) });
this.$store.commit({
type: "addCount",
num: 2,
});
},
action() {
// this.$store.dispatch("addCountAsync", { num: 1 });
this.addCountSync({ num: 1 });
},
},
computed: {
...mapState(["count"]),
...mapGetters(["newCount"]),
},
};
</script>
-
Modules
當(dāng)所有數(shù)據(jù)都放入store中，當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對象就有可能變得相當(dāng)臃腫。Modules的作用就是將store劃分為不同的模塊,每個(gè)Modules都包含state,getters,mutations,actions。這樣做方便代碼維護(hù)，結(jié)構(gòu)更清晰
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)
