• Vuex的简介以及入门案例

      🏅我是默，一个在CSDN分享笔记的博主。📚📚

    🌟在这里，我要推荐给大家我的专栏《Vue》。🎯🎯

    🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。🚀🏆

    🌈让我们在Vue的世界里畅游吧！🌈

    🎁如果感觉还不错的话请记得给我点赞哦！🎁🎁

    💖期待你的加入，一起学习，一起进步！💖💖 

    一.Vuex的简介

    Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的一致性。Vuex能够帮助我们更好地组织和管理Vue.js应用中的状态。

    在Vue.js中，组件之间的通信可以通过props和events来实现，但是当应用较大且组件较多时，这种方式会变得复杂和冗余。Vuex提供了一个全局的状态管理机制，将应用中的状态存储在一个单一的、可预测的状态树中（即store），并可以在任何组件中访问和修改这些状态。

    Vuex的核心概念包括：state（存储应用的状态）、mutations（修改状态的方法）、actions（处理异步操作）、getters（获取派生状态）。通过定义这些概念，我们可以清晰地管理应用的状态和数据流动。

    使用Vuex能够带来以下好处：

    1. 单一状态树：所有的应用状态都集中到一个store中，方便管理和维护。
    2. 状态可预测：通过mutations来修改状态，使得状态的变化变得可追踪和可调试。
    3. 组件通信更简单：不需要通过props和events来传递数据，直接从store中获取和修改状态。
    4. 支持插件扩展：可以使用插件来扩展Vuex的功能，例如调试工具、持久化存储等。

    图像理解

    ​

    传统传值的图像理解 

    ​

     二.Vuex的入门案例

    1.下载Vuex相关的插件

    npm install vuex -S

    ​  

    2.Vuex中的存值和取值 

    2.1前期准备工作

    2.2搭建Vue界面
    2.  
    3.  
    4. <script>
    5.   export  default{
    6.        data() {
    7.          return{
    8.            msg:'默认值'
    9.          }
    10.        }
    11.   }
    12. script>
    13.  
    14. <style>
    15. style>
    2.  
    3.  
    4. <script>
    5.   export  default{
    6.        data() {
    7.          return{
    8.            msg:'默认值'
    9.          }
    10.        }
    11.   }
    12. script>
    13.  
    14. <style>
    15. style>
    搭建架子
    1. import page1 from '@/views/vuex/page1'
    2. import page2 from '@/views/vuex/page2'
    3.  
    4.  
    5.  {
    6.           path: '/vuex/page1',
    7.           name: 'page1',
    8.           component: page1
    9.         },
    10.         {
    11.           path: '/vuex/page2',
    12.           name: 'page2',
    13.           component: page2
    14.         }

    2.3构建Vuex的包用于存储和Vuex相关的文件 

    ​

    3.构建Store包用于数据的存储和取值

    ​

     3.1在state.js中定义变量

    1. //  定义变量
    2. export  default {
    3.     eduName:'刘兵的爱情故事'
    4. }

    3.2在mutations.js中设置值

    1. //设置值
    2. export  default {
    3.     setEeduName:(state,payload)=>{
    4.      
    5.        state.eduName=payload.eduName;
    6.     }
    7. }

      state 就是 state.js文件导出的参数
      payload vue 传递的参数

    3.3在getter.js中取值

    1. // /取值
    2. export  default {
    3.     getEeduName:(state)=>{
    4.      return state.eduName;
    5.     }
    6. }

    3.4整合资源

     

    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    3. import state from './state'
    4. import getters from './getters'
    5. import actions from './actions'
    6. import mutations from './mutations'
    7. Vue.use(Vuex)
    8. const store = new Vuex.Store({
    9.  	state,
    10.  	getters,
    11.  	actions,
    12.  	mutations
    13.  })
    14.  
    15.  export default store

    4.在定义的Vue组件中实现实例