• JavaScript入门 Vuex/elementPlus UI组件库 Day08

    vuex

    什么是vuex

    状态管理器

            Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。因为我们是MVVM框架，view取决于我们model(数据)，view如何展示称为元素状态，那么model数据也就是状态数据。

             vuex是基于flux设计原理实现的一个单向数据流状态管理器，但他不是唯一的状态管理器，还有个pinia

            管理状态数据的库

    Vuex特点

            全局数据：

                    全局变量会导致全局数据污染，所以vuex一定是一个闭包

                    集中式存储管理应用的所有组件的状态

            实现数据共享：简化Vue组件间通讯，可跨组件(子传父、父传子)

                    eventBus：两个组件必须同时存在，并且监听要早于触发：数据不会缓存

                    provide+inject：修改数据不能在子组件中进行，可以用computed缓存

                    父子传子：不能跨组件传值，只能是父子关系才可以

            数据可预测化：使用发布订阅机制来实现；保证状态以一种可预测的方式发生变化(有序进行数据存储获取)

    核心概念与原理

    1. state：

    页面状态管理容器对象。集中存储Vue components状态数据

    定义和初始化全局需要托管的数据，因为托管的数据是状态，所以这个属性是state

    2. mutations：

    修改数据/扭转状态数据

    状态改变操作方法，由actions中的commit(‘mutation 名称’)来触发。

    是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。

    • 修改数据的方法不能为异步方法，为什么？

         因为异步函数，什么时候结束，不清楚，但是setToken方法执行以后，会立刻发布更新消息，那么这样，发布出去的消息有问题，数据更新还没有执行完成。

            而且flux设计原理，规定mutation必须为一个纯函数--输出必须完成依赖输入，不能修改外部数据

    3. commit：

    状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。

    是一个提交数据的方法    

    4. actions：

    操作行为处理模块,执行数据处理的动作属性。这个动作不可以修改数据，因为修改数据只能在mutations可以。所以它获取到异步数据后需要一个commit方法进行数修改。

    actions可以定义异步任务，由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。

    5. dispatch：

    操作行为触发方法，是唯一能执行action的方法。

    6. getters：

    state对象读取方法，取数据。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。 

    getters和state是两个不同的模块，所以数据不能共享，那么只有这个方法把值传递进来

    getters是获取数据的getter方法

    因为getter方法传递给vuex以后，他还需要加工，所以可以把state传递进来

    7.this.$store

    this.$store中只有三个属性可用：getters、commit、dispatch，其他都是 _ 开头的私有属性

            getters是获取数据的getter方法

            commit提交数据，定义接口commit('type提交给这个方法中去',提交的数据)，是一个提交数据的方法

            dispatch调遣/派遣一个动作，即actions

     使用步骤

    1.下载安装

    1. npm install vuex@4.0.2  --save 
    2. npm install vuex@next --save

    2.在src下的main.js引入、注册

    1. //src/main.js
    2. import { createApp } from 'vue'
    3. import App from './views/index.vue'
    4. import Vuex from 'vuex'
    5. //Store这个方法/类执行以后会得到一个Store实例
    6. const store = new Vuex.Store({
    7.     state:{//定义和初始化全局需要托管的数据，因为托管的数据是状态，所以这个属性时state
    8.         token: 100,
    9.         userInfo: {}
    10.     },
    11.     getters:{
    12.          mytoken(_state) {
    13.             return _state.token
    14.         },
    15.         userInfo: _state => _state.userInfo
    16.     },
    17.     // 执行数据处理的动作属性中去执行--dispatch方法--调遣、派遣一个动作
    18.     actions: {
    19.         // 这个动作没有办法执行数据修改，因为数据修改只有mutations可以，所以它获取到异步数据以后需要一个commit方法进行数据修改
    20.         async getUserInfo(_store, id) {
    21.             let result = await ajax(id)
    22.             _store.commit('setUserInfo', result)
    23.         }
    24.     },
    25.  mutations: {
    26.         setToken(_state, _token) {
    27.             // 修改的是state的数据，这里没有state对象，那么只有这个方法把state传递进来
    28.             // 第二个参数才是我们传递的数据
    29.             _state.token = _token
    30.         },
    31.         setUserInfo(_state, _userInfo) {
    32.             console.log('----------------- 赋值', _userInfo)
    33.             _state.userInfo = _userInfo
    34.         }
    35.     }
    36.  
    37. })
    38. // 也需要注入store
    39. createApp(App).use(store).mount('#root')

    3.主页 views/index.vue 获取后显示值

    1. //views/index.vue
    2. <template>
    3.     <div class="box">
    4.         <h3>系统的名字h3>
    5.         <p>
    6.             当前的token值：{{$store.getters.mytoken}}
    7.         p>
    8.         <Home/>
    9.     div>
    10. template>
    11. <script>
    12.     import Home from './Home.vue'
    13.     export default {
    14.         components: { Home },
    15.         created() {
    16.             console.log(this.$store.getters.mytoken)
    17.         }
    18.     }
    19. script>

     4.首页 主页的子组件  src/views/Home.vue 修改上面首页token的值 commit(传递值)

    1. //src/views/Home.vue
    2. <template>
    3.     <div class="box">
    4.         <hr>
    5.         <h4>首页 -- 欢迎您 -- {{name}}h4>
    6.         <p>
    7.             <button @click="changeToken">修改token数据button>
    8.         p>
    9.         <Child/>
    10.     div>
    11. template>
    12. <script>
    13.     import Child from './Child.vue'
    14.     export default {
    15.         components: { Child },
    16.         computed: {
    17.             name() {
    18.                 // console.log('userInfo-----',this.$store.getters.userInfo);
    19.                 return this.$store.getters.userInfo.name
    20.             }
    21.         },
    22.         methods: {
    23.             changeToken() {
    24.                 let value = this.$store.getters.mytoken
    25.                 this.$store.commit('setToken', value + 1)
    26.             }
    27.         }
    28.     }
    29. script>

     5.首页子组件 传递值给首页的欢迎您

    1. //src/views/Child.vue
    2. <template>
    3.     <div class="box">
    4.         <hr>
    5.         <h5>这里是Home的子组件h5>
    6.         <p>
    7.             名字: <input v-model='myname' type="text">
    8.         p>
    9.         <p>
    10.             <button @click="asyncFunc">异步请求数据修改button>
    11.         p>
    12.     div>
    13. template>
    14. <script>
    15.     export default {
    16.         data() {
    17.             return {
    18.                 myname: ''
    19.             }
    20.         },
    21.         methods: {
    22.             asyncFunc() {
    23.                 this.$store.dispatch('getUserInfo', this.myname)
    24.             }
    25.         }
    26.     }
    27. script>

     使用步骤

    1.下载安装:

    npm install vuex@4.0.2  --save 或 npm install vuex@next --save

    2.新建实现store文件夹  index.js文件

    1. import {createStore} from 'vuex'  //引入vuex，解构createStore
    2. const store = createStore({  //使用createStore
    3.     state:{  //状态
    4.         count:0 //状态数据
    5.     },
    6.     mutations:{  //方法
    7.         //state:状态，第二个及以后的参数是传入的参数用逗号隔开
    8.         PLUS(state,user){  //大写_大写
    9.             state.count++
    10.             //stare.count = user
    11.         },
    12.         MINUS(state){
    13.             state.count--
    14.         }
    15.     },
    16.     actions:{  //方法
    17.         plus({commit}){  //commit方法调用
    18.             commit('PLUS')  //mutations下的方法名
    19.         },
    20.         minus({commit}){
    21.             commit('MINUS')
    22.         }
    23.     },
    24.     getters:{ //获取值
    25.         num:(state)=>state.count
    26.     }
    27. })
    28. export default store

    3. main.js文件引入集成到vue  

    1. import { createApp } from 'vue'
    2. import App from './App.vue'
    3. import router from './router'
    4. import store from './store' //store文件下的store
    5. const app = createApp(App)
    6. app.use(router)
    7. app.use(store)  //集成
    8. app.mount('#app')

    4.使用vuex 

    1. <template>
    2.     <div>
    3.         <p>显示vuex状态count : {{num}}p>  
    4.         <button type="button" @click="onPlus">加一button> 
    5.     div>
    6. template>
    1. <script>
    2. export default {
    3.     //methods - 创建方法
    4.     methods:{
    5.         onPlus(){               //actions里的定义的名字,
    6.             this.$store.dispatch('plus'，参数)   //调用方法.将参数传回store
    7.         }
    8.     },
    9.     computed:{
    10.         num(){
    11.             return this.$store.getters.num
    12.         }
    13.     }
    14. }
    15. script>

    ...map 辅助函数

    mapGetters 直接获取getters值

    mapActions 直接操作行为处理

    下载、创建、引入集成与前面一样 ，使用方法有些不同

    使用

    1.在组件里引入 .vue

    1. <script>
    2. import { mapGetters,mapActions } from 'vuex'  //引入
    3. script>
    4. <template>
    5. 	<div>
    6. 		<p>显示vuex状态count : {{ num }}p>
    7. 		<button type="button" @click="minus">减一button>
    8. 	div>
    9. template>

    2.使用  .vue

    1. export default {
    2. 	data() {
    3. 		return {}
    4. 	},
    5. 	//methods - 创建方法
    6. 	methods: {
    7. 		// onMinus() {
    8. 		// 	this.$store.dispatch('minus')
    9. 		// },   上下实现的效果一样
    10.         // ...mapActions({
    11. 		//计算属性名: vuex中actions定义名称
    12.         //     onMinus:'minus'
    13.         // })  计算属性名随意取，如果和actions名一样就用下面这个方式
    14.         ...mapActions(['minus']) //当计算属性名和vuex中getters定义名称相同时，使用如下方式实现
    15. 	},
    16. 	computed: {
    17. 		// num(){
    18. 		//     return this.$store.getters.count
    19. 		// },
    20. 		// ...mapGetters({
    21. 		//计算属性名: vuex中getters定义名称
    22. 		//     num:'count'
    23. 		// })
    24. 		...mapGetters(['num']),
    25. 	},
    26. }

    持久化存储

    1.安装vuex-persistedstate插件

    npm install vuex-persistedstate --save

     2.在store中的index.js中引入

    该插件默认持久化所有state，当然也可以指定需要持久化的state：

    1. import { createStore } from 'vuex'
    2. import createPersistedState from 'vuex-persistedstate'  //引入持久化 哪个vue需要持久化就在哪里引入
    3. const store = createStore({
    4.     plugins: [
    5. 		createPersistedState({
    6. 			storage: window.sessionStorage, //默认 修改存储的状态
    7. 			key: 'userkey',   //上下两个可以不写 默认key为vuex
    8.             reducer(data) {
    9.               return {
    10.               // 设置只储存state中的myData  不设置为存储所有
    11.               myData: data.myData
    12.             }
    13. 		}),
    14. 	],
    15. })

    Module模块化

    应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter 

    1.在store文件下创建modules文件夹，文件夹内创建各种所需要处理的模块

    1. //cart.js
    2. const cart = {  //在cart这个命名空间下
    3. 	namespaced: true, //命名空间指定模块名
    4. 	state: {
    5. 		list: [],
    6. 	},
    7. 	mutations: {
    8. 		ADD_Cart(state, product) {
    9. 			state.list.push(product)
    10. 		},
    11. 	},
    12. 	actions: {
    13. 		addCart({ commit }) {
    14. 			commit('ADD_Cart')
    15. 		},
    16. 	},
    17. 	getters: {
    18. 		// list:state=>state.list
    19. 		list(state) {
    20. 			return state.list
    21. 		},
    22. 	},
    23. }
    24. export default cart

    store中的index.js 

    1. import { createStore } from 'vuex'
    2. import createPersistedState from 'vuex-persistedstate'
    3. import user from './modules/user'  //导入user.js
    4. import cart from './modules/cart'  //导入cart.js
    5. const store = createStore({
    6. 	modules: { //集成模块
    7. 		user,
    8. 		cart,
    9. 	}
    10. })
    11. export default store
    1. //Home.vue
    2. import { mapGetters } from "vuex";
    3. export default {
    4. 	data() {
    5. 		return {
    6. 			// user: null,
    7. 		}
    8. 	},
    9. 	computed:{
    10. 		user(){
    11. 			return this.$store.getters['cart/list'] //cart这个命名空间下的list
    12. 		}
    13. 		// ...mapGetters(['user'])
    14. 	},

    elementPlus UI组件库

    1.下载安装组件库

    1. NPM****
    2. $ npm install element-plus --save
    3. # Yarn
    4. $ yarn add element-plus
    5. # pnpm
    6. $ pnpm install element-plus

    2. 按需导入 自动按需导入推荐

    首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

    npm install -D unplugin-vue-components unplugin-auto-import

    3.vite.config.js 配置插件

    1.  import { defineConfig } from 'vite'
    2.  import AutoImport from 'unplugin-auto-import/vite'
    3.  import Components from 'unplugin-vue-components/vite'
    4.  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    5.  export default defineConfig({
    6.  // ...
    7.  plugins: [
    8.      // ...
    9.      AutoImport({
    10.      resolvers: [ElementPlusResolver()],
    11.      }),
    12.      Components({
    13.      resolvers: [ElementPlusResolver()],
    14.      }),
    15.  ],
    16.  })

     Icon图标下载

    npm install @element-plus/icons-vue

     按需导入

    直接通过设置类名为 el-icon-iconName 来使用即可 

    1. //Login.vue        
    3. <el-icon> <User /> el-icon>
    4. <script>export default {
    5. 	components: {
    6. 		User,
    7. 		Lock,
    8. 	},
    9. }script>
    10.  
    11. //或者
    12. <i class="el-icon-share">i>
    13. <i class="el-icon-delete">i>
    14. <el-button type="primary" icon="el-icon-search">搜索el-button>

  • 相关阅读:
    X Metaverse Pro Cloud Mining Starts a New Level of Mining
    重走JAVA之类与对象相关的
    I/O多路复用 - select
    动态规划专项---最长上升子序列模型
    Java基础27，28（多线程,ThreadMethod ,线程安全问题,线程状态,线程池）
    k8s核心操作_使用k8s在一个pod中部署两个以上的容器_以及部署两个nginx尝试---分布式云原生部署架构搭建020
    shell 多线程
    公钥密码学中的公钥和私钥
    LeetCode——662.二叉树最大宽度
    JavaSE学习值之--认识异常
  • 原文地址：https://blog.csdn.net/qq_63354840/article/details/127414739