2024年Web前端最全vue中的VueX详解及使用_vuex详解和用法，web快速开发框架

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3.非父子组件或父子组件

更好的方式是在vue中使用vuex

方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。

方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

四、vuex初步使用步骤

1.安装

npm install vuex -S

2 .创建store模块，分别维护state/actions/mutations/getters

3. 在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块

import Vue from ‘vue’
import Vuex from ‘vuex’
import state from ‘./State’
import getters from ‘./Getters’
import actions from ‘./Actions’
import mutations from ‘./Mutations’
Vue.use(Vuex)
const store = new Vuex.Store({
     state,
     getters,
     actions,
     mutations
 })

export default store

4. 在main.js中导入并使用store实例

main.js

import store from ‘./store’

---

new Vue({
  el: ‘#app’,
  data(){
      return{
          Bus:new Vue({
              
          })
      }
  },
  router,
store,//在main.js中导入store实例
  components: { App },
  template: ‘’
})

5. 之后按要求编码，即可使用vuex的相关功能

vuexPage1.vue

    

        

页面1：欢迎来到{{msg}}

    

6.配置路由

import vuexPage1 from ‘@/views/sys/vuexPage1’

---

{
                path: ‘/sys/vuexPage1’,
                name: ‘vuexPage1’,
                component: vuexPage1
            }

7.展示结果

五、vuex取值

1.在state.js编写全局要读取的数据

export default{
      resturantName:‘慧慧餐馆’
}

2.在VuexPage1和VuexPage2中填写计算属性

computed:{//计算属性
     msg(){
     //return “KFC”;
       return this.$store.state.resturantName;
     }
  }

结果：

vuex第二种取值方法：

1.Getterts.js

export default{
    getResturanName:(state)=>{
        return state.resturantName;
    }

}

2.调用

computed:{//计算属性
     msg(){
     //return “KFC”;
       //return this.$store.state.resturantName;\ast \ast returnthis.$store.getters.getResturanName;//推荐使用这种**
     }
  }

六、vuex存值

1.处理数据的唯一途径，state的改变或赋值只能在这里Mutation.js

export default{
     // type(事件类型)： 其值为setResturantName
     // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器
    setResturanName:(state,payload)=>{
        state.resturantName=payload.resturantName;
    }
}

2.在VuexPage1中添加一个按钮来控制，并且调用Mutation

    

        

页面1：欢迎来到{{msg}}

       **

运行结果：

七、Vuex异步加载

1.编写store/Action.js

export default{
    setResturanNameAsync:(context,payload)=>{
        //context等价与this.$store,也就是他代表了vuex的上下文
        //state.resturantName=payload.resturantName;
总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；