vue

vuex状态管理

Posted by アライさん on 2022年08月16日

vuex状态管理

安装 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
npm install vuex@next --save  
```  
  
## **state**  
在createStore中定义，全局共享数据。   
使用：this.$store.state     
```javascript
//createStore中
state() {
    return { count: 0 }
},
//页面使用
import { mapState } from 'vuex'
computed: mapState(['count']),
```  

## **getter**  
计算属性，在createStore中定义。  
```javascript
//createStore中
getters: {
    countText(state) {
        return state.count + '次'
    },
    //接受传参拼接
    countText2(state) {
        return (s) => { return state.count + s; };
    }
},

//页面使用
import { mapGetters } from 'vuex'
computed: mapGetters(['countText2']),
```  

## **mutation**  
修改state里的数据。只允许同步修改。  
```javascript
//createStore中
mutations: {
    increment(state,payload) {
        state.count+=payload.count
    }
},
//页面调用时
this.$store.commit({
   type: 'increment',
   count:2,
});

action

调用mutation，异步修改数据。
action本身不修改数据，包装mutation实现。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
//createStore中
actions: {
    asyncIncrement(context, payload) {
        setTimeout(() => {
            //调用mutations中的方法修改
            context.commit('increment', payload);
        }, 3000);
    },
},
//页面使用
this.$store.dispatch('asyncIncrement',{count:2});
```    

## **module**    

拆分store，每个module都有自己的state、mutations、actions、getters。  
module还可以拥有自己的子module。  

```javascript  
const module1 = {
    //隔离。必须通过  'helloWorld1/increment1' 才能访问
    namespaced: true,
    state() {
        return {
            count1: 7
        };
    },
    mutations: {
        increment1(state, payload) {
            state.count1 += payload.count
        }
    }
};
const module2 = {
    //getter、mutations、actio共用，其他module也可以访问到
    namespaced: false,
    state() {
        return {
            count2: 0
        };
    },
    mutations: {
        increment2(state, payload) {
            state.count2 += payload.count;
        }
    }
};

const store = createStore({
    modules: {
        helloWorld1: module1,
        helloWorld2: module2,
    },
});

//页面使用
//namespaced: true,
increment() {
    this.$store.commit({
    type: 'helloWorld1/increment1',
    count: 2,
    });
}
//namespaced: false,
increment2() {
    this.$store.commit({
        type: 'increment2',
        count: 3
    });
}

module支持动态注册 

//默认没有module2
const store = createStore({
    modules: {
        helloWorld1: module1,
    },
});
//动态注册module2
store.registerModule('helloWorld2',module2);



Tags
vue