Published in：2024-10-24 |

vue-day5

1. Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.1vuex简介

问题一: 传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问问问题二: 我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

1603679040046

1.2 vuex的使用

vuex在使用时主要关注两个属性: 分别是状态state与动作mutations。状态机在定义完成后还需要注册到vue的实例中取。

状态state: state是用来储存组件间所有想要共享的数据,不要把所有的数据都放入state.组件中的大部分数据都是组件本身使用,这些数据依旧放置在组件的data中.

动作mutations: 用来声明状态机可以接受的变化,本身是以个函数,所以可以在一个动作中取操作多个状态.

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
<script>
    let first = {
        template: `
          <div>
          这是一个组件
          <button @click="add">点击数字增加</button>
          </div>
        `,
        methods: {
            add() {
                // 在函数中向状态机提交一个变化  动作
                this.$store.commit("num_add");
            },
        }
    }

    let second = {
        template: `
        <div>这是第二个组件
            <span>点击组件1的按钮,让组件2中的数字发生变化--->{{$store.state.number}}</span>
        </div>
        `
    }

    // 创建状态机  初始化状态state以及行为mutations
    let myStore = new Vuex.Store({
        // 状态:  被共享的数据
        state: {
            // 需要共享的数据
            number: 3,
        },
        // 状态机的动作, 所有组件提交的动作都可以在此被接受
        mutations: {
            // 接收组件1提交的动作
            num_add: function (state) {
                // 在动作中可以对共享的数据做限制
                if (state.number < 10) {
                    state.number++;
                }
            }
        }
    })

    new Vue({
        el: "#app",
        data: {},
        components: {
            first: first,
            second: second
        },
        // 需要将定义好的状态机注入到vue实例中
        store: myStore,
    })
</script>
1
2
3
4
5
6
7
# 总结
1. 导入依赖
2. 创建状态机  初始化state与mutations
3. 将状态机注入到vue实例中
4. 当从状态机中取值时, 需要使用$store.state.参数名  js中使用this.$store.state.参数名
5. 动作是可以传递参数的,  this.$store.comiit("动作名称", "参数")
		注意: 参数只能传递一个  但是可以将多个参数封装后进行传递

1.3 getters的使用

当状态机中state的数据发生改变时, 可以通过getters来对state中发生变化的数据做对应的操作

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
<script>

    let first = {
        template: `
          <div>这是第一个组件
          <button @click="add">按钮</button>
          </div>
        `, methods: {
            add() {
                // 向状态机提交一个动作
                this.$store.commit("add_count");
            }
        }
    }

    let second = {
        template: `
            <div>
            <span>这是第二个组件----->{{$store.state.count}}</span>
            <br>
            <span>获取count的相反数: {{$store.getters.change_count}}</span>
</div>
        `
    }

    let myStore = new Vuex.Store({
        state: {
            count: 1,
        },
        mutations: {
            add_count: function (state) {
                state.count++;
            }
        },
        // getters与state的关系  类似于data  computed
        getters: {
            // 返回count的相反数
            change_count(state) {
                return 0 - state.count;
            },
        }
    })

    new Vue({
        el: "#app",
        data: {},
        components: {
            first: first,
            second: second,
        },
        store: myStore,
    })
</script>

2. 脚手架中使用vuex

脚手架中安装vuex: npm install vuex@3.0.1

在src目录下新建store/index.js

  • store/idnex.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 导包 vue  vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 将vuex注入到vue实例中
Vue.use(Vuex)


// 将定义好的vuex导出
export default new Vuex.Store({
    state: {},
    mutations: {},
    getters: {},
})

  • src/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store"

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: {App},
    template: '<App/>',
    // 注入到vue实例中
    store
})


3. element-ui

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官网: https://element.eleme.cn/#/zh-CN

2.1 环境安装

npm install element-ui

1
2
3
4
5
6
7
......
// 导入element-ui 以及样式
import ElementUI from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"

// 全局注册
Vue.use(ElementUI)

2.2 element-ui的使用

1
2
3
4
5
6
<el-button @click="add">按钮</el-button>
<el-button type="primary" @click="add" disabled>按钮</el-button>
<el-button type="success" @click="add">按钮</el-button>
<el-button type="warning" @click="add" icon="el-icon-edit-outline">修改</el-button>
<el-button type="danger" @click="add" icon="el-icon-delete-solid"> 删除</el-button>
<el-button type="info" @click="add">按钮</el-button>

作业

1
2
3
1. 掌握vuex的使用
2. 使用element-ui替换表格(可选)
3. 整理的vue的知识点  知识图书
Prev:
Next:

    • Copyright © 2022 - 2024 16778738 | Powered by “> |