分类网站发布信息有生意做吗,centos wordpress建站,网上开店怎么找货源,什么是ip地址和域名文章目录 一、vuex简介1.1 概述1.2 核心 二、使用2.1 安装2.2 创建store模块2.3 在src/store/index.js中写入内容2.4.在src/main.js中导入并使用store实例2.5.在views新建vuex目录,添加Page1.vue和Page2.vue文件2.6.配置路由2.7.在LeftNav.vue添加内容 三、存取值3.1 state直接… 文章目录 一、vuex简介1.1 概述1.2 核心 二、使用2.1 安装2.2 创建store模块2.3 在src/store/index.js中写入内容2.4.在src/main.js中导入并使用store实例2.5.在views新建vuex目录,添加Page1.vue和Page2.vue文件2.6.配置路由2.7.在LeftNav.vue添加内容 三、存取值3.1 state直接取值3.2 getters取值3.3 mutations存值3.4 actions存值3.5 发送ajax请求获取后台数据 一、vuex简介
1.1 概述
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它可以帮助我们在应用程序中管理和共享状态使得不同组件之间的数据共享更加简单和可预测。
在Vue.js应用程序中组件之间的通信是通过props和事件来实现的。然而当应用程序变得复杂时组件之间的数据传递和状态管理可能会变得困难和混乱。这时候Vuex就派上了用场。
通过使用Vuex我们可以将应用程序的状态集中管理使得状态的变更和获取变得更加简单和可控。Vuex还提供了一些高级特性如模块化组织、插件系统和严格模式以满足不同应用程序的需求。
1.2 核心
State状态State是应用程序的状态存储它是一个响应式的数据源。在Vuex中我们可以定义和管理应用程序的状态这些状态可以被多个组件共享和访问。
Mutations变更Mutations是用于修改状态的方法。它们是同步的操作用于改变State中的数据。在Vuex中我们可以定义多个Mutations每个Mutation都有一个字符串类型的事件名和一个回调函数用于修改State中的数据。
Actions动作Actions是用于触发异步操作的方法。它们可以包含任意异步操作如网络请求、定时器等。Actions通过调用Mutations来修改State中的数据。在Vuex中我们可以定义多个Actions每个Action都有一个字符串类型的事件名和一个回调函数用于执行异步操作。
Getters获取器Getters是用于从状态中获取数据的方法。它们可以对State中的数据进行计算和过滤并返回一个新的值。在Vuex中我们可以定义多个Getters每个Getters都有一个字符串类型的事件名和一个回调函数用于获取计算后的数据。
二、使用
2.1 安装
1、node.js10 输入以下指令进行安装
npm install vuex -S2、node.js18 输入以下指令进行安装
npm i -S vuex3.6.22.2 创建store模块 2.3 在src/store/index.js中写入内容
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 store2.4.在src/main.js中导入并使用store实例
// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from vue
import App from ./App
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
import axios from /api/http
import VueAxios from vue-axios
import router from ./router
import store from ./store//开发环境下才会引入mockjs
process.env.MOCK require(/mock)Vue.use(ElementUI);
Vue.use(VueAxios,axios)
Vue.config.productionTip false/* eslint-disable no-new */
new Vue({el: #app,data(){return{Bus: new Vue({})}},router,store,components: { App },template: App/
})
2.5.在views新建vuex目录,添加Page1.vue和Page2.vue文件
templatedivh1这是页面1/h1/div
/templatescript
export default {name: Page1
}
/scriptstyle scoped/style
templatedivh1这是页面2/h1/div
/templatescript
export default {name: Page1
}
/scriptstyle scoped/style
2.6.配置路由
import Page1 from /views/vuex/Page1
import Page2 from /views/vuex/Page2#添加到与TopNav同级的地方
{path: /vuex/Page1,name: Page1,component: Page1
},{path: /vuex/Page2,name: Page2,component: Page2
}
2.7.在LeftNav.vue添加内容
el-menu-itemindex/vuex/Page1keykey_999spanVuex页面1/span/el-menu-itemel-menu-itemindex/vuex/Page2keykey_1000spanVuex页面2/span/el-menu-item
三、存取值
3.1 state直接取值
修改src/store/state.js
export default {name: Vuex学习
}
修改src/views/vuex/Page1.vue的内容
templatedivh1这是页面1{{msg}}/h1pstate直接取值/pbutton clickfunc1state直接取值/button/div
/templatescript
export default {name: Page1,data(){return{msg: null}},methods:{func1(){this.msg this.$store.state.name;}}
}
/scriptstyle scoped/style 3.2 getters取值
修改src/store/getters.js
export default {getName(state){return state.name;}
}
修改Page1.vue的内容
#div中添加
pgetters取值/p
button clickfunc2getters取值/button#methods中添加
func2(){this.msg this.$store.getters.getName;
} 3.3 mutations存值
修改mutations.js的内容
export default {setName(state, payload) {state.name payload.name;}
}
修改Page1.vue
#div中添加
pmutations存值/p
button clickfunc3mutations存值/button#methdos中添加
func3(){this.$store.commit(setName,{name: 这是修改后的Vuex学习});
}
修改Page2.vue
- templatedivh1这是页面2{{msg}}/h1/div
/templatescript
export default {name: Page2,data(){return{msg: null}},created() {this.msg this.$store.state.name;}
}
/scriptstyle scoped/style
点击page1按钮page2改变
3.4 actions存值
修改Page1.vue的内容,删除data中的msg,改为computed属性
computed:{msg(){return this.$store.state.name;}
}
修改store/actions.js
export default {setNameAsync(context, payload) {//context指的是vuex的实例//等价于this.$storesetTimeout(function () {context.commit(setName,payload);},6000)}
}
修改Page1.vue
#div中添加
pactions存值/p
button clickfunc4actions存值/button#methods中添加
func4(){this.$store.dispatch(setNameAsync,{name: 这是修改后的Vuex学习--action});
} 3.5 发送ajax请求获取后台数据
api/action.js添加
VUEX_INFO: /vuex/queryVuex,//vuex异步获取数据
修改Page1.vue
- #div中添加
p后台ajax改变值/p
button clickfunc5后台ajax改变值/button#methods中添加
func5(){this.$store.dispatch(setNameAjax,{_this: this});}
修改actions.js
export default {setNameAsync(context, payload) {//context指的是vuex的实例//等价于this.$storesetTimeout(function () {context.commit(setName, payload);}, 3000)},setNameAjax(context, payload) {let _this payload._this;let url _this.axios.urls.VUEX_INFO;let params {resturantName: 这是ajax的修改}_this.axios.get(url, {params}).then(resp{if(resp.data.success){context.commit(setName,{name: resp.data.msg})}}).catch(err{})}
}
