輔助函式…mapState

• 1.index.js中定義資料

1exportdefaultnewVuex.Store({
2state:{
3num:10,
4str:'我是state中的字串'
5},
6mutations:{},
7actions:{},
8modules:{}
9})

• 2.在元件的頁面中呼叫

 1<template>
 2<div>
 3<h1>輔助函式之mapState</h1>
 4<p>mapState中的資料是:{{num}}</p>
 5</div>
 6</template>
 7
 8<script
 
>
 9import{mapState,mapGetters,mapMutations,mapActions}from"vuex";
10exportdefault{
11computed:{
12...mapState(["num"]),
13},
14};
15</script>

輔助函式…mapGetters

1.填寫方法

1getters:{
2vuxFun(state){
3console.log(state);
4returnstate.num*2;
5}
6},

2.元件中呼叫

 1<template>
 2<div>
 3<h1>輔助函式</h1>
 

 4
 5<p>我是Getters中獲得的數值:{{vuxFun}}</p>
 6</div>
 7</template>
 8
 9<script>
10import{mapState,mapGetters,mapMutations,mapActions}from"vuex";
11exportdefault{
12computed:{
13//獲取vuex檔案中getter的方法
14...mapGetters(["vuxFun"]),
15},
16};
17</script>
18
19<stylelang="less"scoped>
20</style
 
>

輔助函式…mapMutations

輔助函式…mapAction

1.index.js中新增方法

1actions:{
2AsyncAddNum(context,payload){
3console.log(payload);
4setTimeout(()=>{
5context.commit('addNum',payload)
6},1000)
7}
8},

• 2.元件中呼叫

 1<template>
 2<div>
 3{{num}}
 4
 5<button@click="fun1()">普通新增</button>
 6<br/>
 7<br/>
 8
 9<button@click="fun2()">非同步新增</button>
10</div>
11</template>
12<script>
13//引入輔助功能
14import{mapState,mapGetters,mapMutations,mapActions}from"vuex";
15exportdefault{
16computed:{
17...mapState(["num"]),
18...mapGetters(["vuxFun"]),
19},
20
21methods:{
22//獲取addNum方法
23...mapMutations(["addNum"]),
24fun1(){
25console.log(123),this.addNum(2);
26},
27//獲取AsyncAddNum方法
28...mapActions(["AsyncAddNum"]),
29fun2(){
30this.AsyncAddNum(2);
31},
32},
33};
34</script>