day08_vuex状第08讲_vuex状态管理和ui库态管理和ui库

一、vuex状态管理

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

1.安装

在项目根目录下执行命令npm i vuex --save

图示：<img src="./vuex.png" />

2.核心概念(模块)

(1)state

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源”而存在。

类似组件中的data，用来定义仓库中的初始数据

①初始化仓库并定义初始数据

/src/main.js

//引入vuex
import Vuex from 'vuex'
Vue.use(Vuex);
//初始化仓库
const store = new Vuex.Store({
    state: {
        msg: '纸上得来终觉浅',
    }
})
new Vue({
    el: '#app',
    router,
    // store:store,
    store,
    components: { App },
    template: '<App/>'
})

②在任意页面组件中使用仓库中的数据

<p>仓库中的msg为:{{ $store.state.msg }}</p>

助手函数

mapState

<script>
import { mapState } from 'vuex'
export default {
    computed:{
        // ...mapState(['msg','num']),
        ...mapState({
            str:state=>state.msg,
            num:state=>state.num
        }),
    }
}
</script>
<template>
    <div>
        <p>{{ str }}</p>
    </div>
</template>

(2)getters

有时候我们需要从 store 中的 state 中派生出一些状态

类似组件中的计算属性

①在仓库中定义计算属性

//初始化仓库
const store = new Vuex.Store({
    // 定义初始数据
    state: {
        msg: '纸上得来终觉浅',
        num:100
    },
    // 定义计算属性
    getters:{
        newnum(state){
            return state.num + 10;
        }
    }
})

②在页面组件中使用计算属性的结果

<p>仓库中的newnum为：{{ $store.getters.newnum }}</p>

助手函数

mapGetters

import { mapGetters } from 'vuex'
export default {
    computed:{
        ...mapGetters(['newnum'])
    }
}

<template>
    <div>
        <p>{{ newnum }}</p>
    </div>
</template>

(3)mutations

在仓库==唯一改变==state的方法

①在仓库中定义修改数据的方式，实现数据的可预测性变化

const store = new Vuex.Store({
    ...
    mutations:{
        changeNum(state){
            state.num += 10;
        }
    }
})

接收额外的参数

mutations:{
    changeNum(state,n=10){
        state.num += n;
    }
}

②在页面组件中通过commit直接调用仓库中定义好的方法

!-- 不传递参数 -->
<button @click="$store.commit('changeNum')">
改变仓库中的num-mutations
</button>
<!-- 传递额外的参数 -->
<button @click="$store.commit('changeNum',5)">
改变仓库中的num-mutations
</button>

助手函数

把仓库中定义好的方法当成页面组件中的方法直接使用

<script>
    import { mapMutations } from 'vuex'
    export default {
        methods:{
            // ...mapMutations(['changeNum'])
            //改变仓库的mutations方法默认的名称
            ...mapMutations({
                setnum:'changeNum'
            })
        }
    }
</script>

<template>
    <div>
        <!--<button @click="changeNum()">改变仓库中的num-mutation</button>-->
         <button @click="setnum()">改变仓库中的num-mutation</button>
    </div>
</template>

(4)actions

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而==不是直接变更状态==。

• Action 可以包含任意异步操作。

①在仓库中定义可以执行异步操作的方法

const store = new Vuex.Store({
    ...
    mutations:{
        changeMsg(state){
            state.msg = '绝知此事要躬行'
        }
    },
    // 定义可以执行异步操作的方法
    actions:{
        //context 上下文，是当前仓库本身
        changeMsgSync(context){
            //setTimeout(function(){
                //提交mutation来实现数据的修改
                context.commit('changeMsg')
            //},3000)
            
        }
    }
})
    

②在页面组件中通过dispatch触发actions中的方法

<button @click="$store.dispatch('changeMsgSync')">改变仓库中的msg-action</button>

助手函数

<script>
    import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
    export default {
         methods:{
            // ...mapMutations(['changeNum'])
            ...mapMutations({
                setnum:'changeNum'
            }),
            ...mapActions(['changeMsgSync'])
         }
    }
</script>

<template>
    <div>
        <button @click="changeMsgSync()">改变仓库中的num-actions</button>
    </div>
</template>

(5)module模块

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得==非常复杂==时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

①在仓库中增加一个模块，比如back

modules:{
        //模块名称：{}
        back:{
            namespaced:true,//启用命名空间
            state:{
                num:200
            },
            mutations:{
                changeNum(state){
                    state.num+=10;
                }
            }
        }
    }

②在页面组件中使用back模块中的数据

 <p>back模块中的num为：{{ $store.state.back.num }}</p>

③在页面组件中调用back模块中改变数据的方法

<button @click="$store.commit('back/changeNum')">改变back模块中的num</button>

3.数据持久化

(1)安装npm i vuex-persistedstate

(2)使用/src/store/index.js

import createPersistedState from "vuex-persistedstate";
export default new Vuex.Store({
    state:{
        userinfo:null
    },
    mutations:{
        setUserInfo(state,data){
            state.userinfo = data;
        }
    },
    plugins:[createPersistedState()]
})

(3)sessionStorage保存数据

plugins:[createPersistedState({
    storage:window.sessionStoreage
})]

二、ui库-element-ui

1.安装

npm i element-ui

2.引入

/src/main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//一定要引入样式文件
Vue.use(ElementUI)