Hay muchas páginas en un programa y también se comparten muchos datos en varias páginas, por lo que necesitamos extraer estas páginas compartidas. Estos datos son administrados por Vuex.
Primero, debes instalar las dependencias de vuex
. Selecciona la configuración manual al crear:
Después de seleccionar la ruta e instalar Vuex
, el archivo store / index.js aparece en el proyecto
//放置全局状态
state: {
},
//计算属性
getter:{
},
//修改数据/状态的方法methods
mutations: {
},
//异步修改数据
actions: {
},
//vuex细分模块
modules: {
}
Haga clic en el botón para aumentar la edad:
//放置全局状态
state: {
username:"wangchen",
age:17
},
//计算属性
getters:{
xuAge:function(state){
return state.age + 1
}
},
//修改数据/状态的方法methods
mutations: {
addAge(state,payload){
state.age += payload
}
},
//异步修改数据
actions: {
},
//vuex细分模块
modules: {
}
<template>
<div class="about">
<h1>This is an about page</h1>
<h1>姓名:{
{
$store.state.username}}</h1>
<h1>年龄:{
{
$store.state.age}}</h1>
<h2>虚岁:{
{
$store.getters.xuAge}}</h2>
<button @click="addAge">添加</button>
</div>
</template>
<script>
export default{
mounted(){
console.log(this); //打印查找如何获取组件
},
methods:{
addAge:function(){
this.$store.commit('addAge',3) //调用addAge方法,每次传入参数3
}
}
}
La acción solicita datos asincrónicos y los muestra en la página:
//异步修改数据
actions: {
//去请求提供段子的服务器
getJoke(context){
let httpUrl = 'https://api.apiopen.top/getJoke?paga=1&count=10&type=text'
fetch(httpUrl).then((res)=>{
//第一次获取的是响应数据,是json结构,需要进行处理
return res.json()
}).then((res)=>{
console.log(res)
context.commit('getList',res.result)
})
}
},
Encuentra elementos de renderizado:
<template>
<div class="about">
<ul>
<li v-for="(item,i) in $store.state.list" :key="i">
<h3>{
{
item.name}}</h3>
<p>{
{
item.text}}</p>
</li>
</ul>
</div>
</template>
<script>
export default{
mounted(){
console.log(this);
//触发vuex的action方法
this.$store.dispatch('getJoke')
},
}
</script>