2024年Web前端最新Vuex(1)，web前端开发初学者

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

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

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

data(){

return{

// 定义主线

Bus:new Vue({

})

}

},

router,

store,

components: { App },

template: ‘’

})

⑤、根据使用的表设计，建立组件VuexPage1.vue

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

⑥、配置路由router/index.js

// 在路由中定义

import Vue from ‘vue’

import Router from ‘vue-router’

import HelloWorld from ‘@/components/HelloWorld’

import Login from ‘@/views/Login’

import Reg from ‘@/views/Reg’

import AppMain from ‘@/components/AppMain’

import LeftNav from ‘@/components/LeftNav’

import TopNav from ‘@/components/TopNav’

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

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

Vue.use(Router)

export default new Router({

routes: [

{

path: ‘/’,

name: ‘Login’,

component: Login

},

{

path: ‘/Login’,

name: ‘Login’,

component: Login

},

{

path: ‘/Reg’,

name: ‘Reg’,

component: Reg

},

{

path: ‘/AppMain’,

name: ‘AppMain’,

component: AppMain,

children:[

{

path: ‘/LeftNav’,

name: ‘LeftNav’,

component: LeftNav

},

{

path: ‘/TopNav’,

name: ‘TopNav’,

component: TopNav

},

{

path: ‘/sys/Articles’,

name: ‘Articles’,

component: Articles

},

**{

path: ‘/sys/VuexPage1’,

name: ‘VuexPage1’,

component: VuexPage1

}**

]

}

]

})

⑦、写VuexPage2组件，配置路由，与VuexPage1 步骤差不多

效果：

二、利用vuex取值

---

在State.js中定义数据：

export default{

resturantName:‘飞歌餐馆’

}

在Getters.js中定义方法：

export default{

getResturantName:(state)=>{

return state.resturantName;

}

}

在VuexPage1 与VuexPage2中以同样的方法取值：

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

<button @click=“panta”>盘它

export default {

name: ‘HelloWorld’,

data () {

return {

}

},

methods:{

panta(){

}

}

computed:{

msg(){

// return “kpc”;

//return this.$store.state.resturantName;

return this.$store.getters.getResturantName;

}

}

}

三、利用vuex同步存值

---

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

// type(事件类型)： 其值为setResturantName

// payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器,从组件中传递

export default{

setResturantName: (state, payload) => {

state.resturantName = payload.resturantName;

}

}

在VuexPage1中调用：

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

<button @click=“panta”>盘它

export default {

name: ‘HelloWorld’,

data () {

return {

}

},

methods:{

**panta(){

this.$store.commit(“setResturantName”,{

resturantName:“lv餐馆”

})**

}

},

computed:{

msg(){

// return “kpc”;

return this.$store.state.resturantName;

}

}

}

点击盘它改变了数据：

同样角色管理的页面的数据也发生了改变：

四、异步修改值

---

Actions.js:

export default{

setResturantNameAsync: (context, payload) => {

//context等价于this.$store,也就是它代表了vuex的上下蚊

//   在这个文件中是可以调用同步文件mutations.js定义的同步方法

// context.commit(“setResturantName”,payload);

// 定制函数,6秒钟后执行

setTimeout(function(){

context.commit(“setResturantName”,payload);

},6000);

}

}

在VuexPage1中调用：

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

<button @click=“panta”>盘它

<button @click=“pantaAsync”>幕后黑手

export default {

name: ‘HelloWorld’,

data () {

return {

}

},

methods:{

panta(){

this.$store.commit(“setResturantName”,{

resturantName:“lv餐馆”

})

},

**pantaAsync(){

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

data () {

return {

}

},

methods:{

panta(){

this.$store.commit(“setResturantName”,{

resturantName:“lv餐馆”

})

},

**pantaAsync(){

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-4PKXxKs3-1714918246356)]