【无标题】vue的五大核心

1.0 Vuex 状态管理库

Vuex是一个Vue的插件，用于管理状态（ 数据 ）

Vuex作用场景：

• 祖先组件向子孙组件传递数据,层级非常深

• 多个组件间的数据共享

Vue的核心功能

核心State

用于注册、存放数据的仓库

export default new Vuex.Store({
  // 存储状态(数据)
  state: {
    num: 250,
    goods: [
    ],
    // 白马会员列表
    whiteHorseVip: [
      { name: '凯子哥', age: 24 },
      { name: '黄子姐', age: 22 },
      { name: '维子哥', age: 26 },
      { name: '俊子哥', age: 18 }
    ]
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1、直接获取仓库的数据

<template>
  <div>
    <div>num:{{ $store.state.num }}</div>
    <div>
      goods:
      <p v-for="item in $store.state.goods"
        :key="item.name"
      >{{ item.name }} --{{ item.price*item.count }}</p>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$store.state.num);
  }，
  // 推荐
  computed: {
    num() {
      return this.$store.state.num;
    },
    goods() {
      return this.$store.state.goods;
    }
  },
};
</script>

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

2、通过辅助函数获取仓库数据

mapState 特点：map 映射 State仓库 ： 与仓库里的state一一对应

import {mapState} from 'vuex'
export default{
    computed:{
        // 辅助函数的数组写法
        ...mapState(['要取变量1'，'要取变量2']), 【强烈推荐】
        // 辅助函数对象写法
        ...mapState({
        	key:(state)=>state.要取变量1,
    		key1:(state)=>state.要取变量2,
    	})
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

核心Mutations

用于修改仓库数据的唯一方法，如果要修改仓库的数据必须提交一个mutation

// 定义修改的方法，mutation
export default new Vuex.Store({
  // 存储状态(数据)
  state: {
    num: 250,
    goods: []
  },
  // 修改数据的唯一方法，如果要修改状态必须提交一个mutation
  mutations: {
	// 定义一个修改mutation - 函数名一般为全大写
	函数名(state,payload){
		state.goods = payload
	}
  },
})


// 在你的页面直接提交mutation变化，用于修改仓库的数据
this.$store.commit('函数名',实参)
this.$sotre.commit({ 【不推荐】
	type:'函数名',
	data:实参
})

// 通过辅助函数提交mutation
import {mapMutations} from 'vuex'

export default{
	methods:{
		// 辅助函数的数组写法
		...mapMutations(['函数名'])
		// 辅助函数的对象写法
		...mapMutations({
			key:'函数名1',
			key2：'函数名2'
		})
	}

}
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

核心Getters

相当与状态管理库的计算属性,对state进行二次处理

// 定义getter处理方法
export default new Vuex.Store({
  // 存储状态(数据)
  state: {
    num: 250,
    goods: [
    ],
    // 白马会员列表
    whiteHorseVip: [
      { name: '凯子哥', age: 24 },
      { name: '黄子姐', age: 22 },
      { name: '维子哥', age: 26 },
      { name: '俊子哥', age: 18 }
    ]，
      
  },
  // vuex里的计算属性
  getters: {
    // 把数据进行二次处理
    whiteHorseVipList(state) {
      return state.whiteHorseVip.filter(v => v.age > 18)
    }
  }
})

// 在页面获取getters里的属性
<template>
  <div>
    <div>num:{{ $store.getters.whiteHorseVipList }}</div>
    <div>
      goods:
      <p v-for="item in $store.getters.whiteHorseVipList"
        :key="item.name"
      >{{ item.name }} --{{ item.age }}</p>
    </div>
  </div>
</template>

<script>
export default {
  // 推荐
  computed: {
    whiteHorseVipList() {
      return this.$store.getters.whiteHorseVipList;
    }
  },
};
</script>

// 辅助函数获取getters属性
import {mapGetters} from 'vuex'
export default{
    computed:{
        // 辅助函数的数组写法
        ...mapGetters(['whiteHorseVipList'])
    }
}
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

核心Actions

用于异步修改数据，但是最终修改数据还是需要调用mutation方法

// 在仓库中定义actions
export default new Vuex.Store({
  // 存储状态(数据)
  state: {
    num: 250,
  },
  // 修改数据的唯一方法，如果要修改状态必须提交一个mutation
  mutations: {
    SET_NUM(state, payload) {
      state.num += payload
    }
  },
  // 处理异步修改数据，最终也要提交一个mutation
  actions: {
    asyncSetNum(context, payload) { // context === new Vuex（）
      return new Promise(reslove => {
        // 异步操作
        setTimeout(() => {
          context.commit('SET_NUM', payload)
          reslove()
        }, 2000);

      })
    }
  },
})

// 在页面触发actions的方法

// 直接触发
this.$store.dispatch('函数名'，实参)
this.$store.dispatch({ 【不推荐】
    type:'函数名''，
    data:'实参'
})

// 辅助函数
import {mapActions} from 'vuex'
export default{
    methods:{
        // 数组写法
        ...mapActions(['函数名']),
        
        // 对象写法
        ...mapActions({
            键名:'函数名'
        })
    }
}
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

核心modules

模块化，拆分你的仓库

1 定义模块化的仓库

export default new Vuex.Store({

  // 模块，把仓库拆分成多个
  modules: {
    moduleA: {
      namespaced: true,
      state: {
        money: 1000000
      },
      getters: {},
      mutations: {},
      actions: {}
    },
    moduleB: {
      namespaced: true,
      state: {
        money: 10
      },
      getters: {},
      mutations: {},
      actions: {}
    }
  }
})

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

2 获取模块化里的状态（数据）

// 直接获取
this.$store.state.模块名.属性名;
// 辅助函数获取
1
2
3

修改模块里的数据

<template>
  <div>
    home
    <h1>moneyA：{{ moneyA }}</h1>
    <h1>moneyB：{{ moneyB }}</h1>

    <div>money:{{ money }}</div>
    <button @click="SET_MONEY(100)">改变</button>
    <button @click="update">直接改变</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  created() {
    console.log(this.$store);
  },
  computed: {
    // 辅助函数mpaState获取模块里的数据
    ...mapState("moduleA", ["money"]),
    moneyA() {
       // 直接获取modelA里state的属性
      return this.$store.state.moduleA.money;
    },
    moneyB() {
        // 直接获取modelB里state的属性
      return this.$store.state.moduleB.money;
    }
  },
  methods: {
     // 模块化里获取辅助函数
    ...mapMutations("moduleA", ["SET_MONEY"]),
    update() {
     // 直接调用模块化里的方法
      this.$store.commit("moduleA/SET_MONEY", 200);
    }
  }
};
</script>


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