VUEX的基础使用存值及异步

什么是VUEX

有什么作用

安装

取值

异步

什么是VUEX

VUEX 是一个用于状态管理的状态容器模式（state management pattern）库，用于 Vue.js 应用程序。它允许你在应用程序中集中管理和共享状态，并提供了一组用于更改状态的规则。VUEX 的核心概念包括 store（仓库）、state（状态）、mutations（变动）和 actions（动作）。通过 VUEX，你可以更方便地跟踪和调试状态变化，以及在不同组件之间共享状态。无论是大型还是小型的 Vue.js 应用程序，VUEX 都可以帮助你更好地组织和管理应用程序的状态。

有什么作用

集中管理状态：VUEX 提供了一个全局的状态容器（store），将应用程序的状态集中存储在一个地方。这样，多个组件可以共享和访问同一个状态，避免了组件之间状态传递的复杂性。

状态共享：VUEX 允许你在应用程序的不同组件之间共享状态。这意味着，一个组件的状态变化可以被其他组件感知到，并相应地做出更新。这种状态共享可以简化组件之间的通信，提高代码的可维护性。

易于跟踪和调试状态变化：VUEX 记录了状态的变化历史，使得你可以轻松地跟踪和调试状态的变化。这对于定位和解决状态相关的问题非常有帮助。

快速的状态更新：通过定义 mutations 和 actions，VUEX 提供了一种统一且可控的方式来更新状态。这样可以确保状态的变化是可追踪和可测试的，也提供了对状态变化的约束和限制。

总之，VUEX 使得在 Vue.js 应用程序中管理和共享状态变得更加简单和高效，提高了应用的可维护性和可扩展性。

取值

思维图

安装

输入以下命令来安装Vuex:

npm install vuex -S (node的环境配置为10的执行这个命令)

npm i -S vuex@3.6.2 (node的环境配置为18的执行这个命令)

package.json中有这些代码就代表安装成功了

菜单栏

在src中创建一个vuex的目录，在改目录下创建两个组件demo1，demo2

demo1

<template><div style="padding: 60px;"><h1>我是第一个</h1><p>改变state中的值</p>请输入：<input v-model="msg" /><button @click="fun1">获取state</button><button @click="fun2">改变state</button><button @click="fun3">获取state</button><button @click="fun4">请求后台</button></div>
</template><script>export default {data() {return {msg: '默认值'}},methods: {fun1() {// this.$store-->store/index.js 不推荐let eduName = this.$store.state.eduName;alert(eduName);},fun2() {this.$store.commit('setEduName', {eduName: this.msg})},fun3() {this.$store.dispatch('setEduNameAsync', {eduName: this.msg})},fun4() {this.$store.dispatch('setEduNameByAjax', {eduName: this.msg,_this:this})}}}
</script><style>
</style>

demo2

<template><div><h1>我是第二个</h1>{{eduName}}</div>
</template><script>export default{data(){return{msg:'默认值'}},computed:{eduName(){return this.$store.state.eduName;// return this.$store.getters.getEduName;}}}
</script><style>
</style>

到项目中src的router的index.js文件中配置路径

import demo1 from '@/views/vuex/demo1'
import demo2 from '@/views/vuex/demo2'{path: '/vuex/demo1',name: 'demo1',component: demo1},{path: '/vuex/demo2',name: 'demo2',component: demo2}

在src中的components的LeftNav.vue组件中编辑(增加)代码

<el-submenu index="idx_999" key="key_999"><template slot="title"><span>vuex管理</span></template><el-menu-item index="/vuex/demo1" key="key_99901"><span>页面1</span></el-menu-item><el-menu-item index="/vuex/demo2" key="key_99902"><span>页面2</span></el-menu-item></el-submenu>

模块

state.js

export default{eduName:'沸羊羊课堂开课啦',
}

getters.js

export default{setEduName:(state)=>{return state.eduName;}
}

mutations.js

export default{setEduName:(state,payload)=>{state.eduName = payload.eduName;}
}

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 store

引用

在mian.js中引用

// 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'
//开发坏境才会引入mockjs
// process.env.MOCK && require('@/mock')
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import store from './store'Vue.use(ElementUI)
Vue.config.productionTip = falseimport axios from '@/api/http'
import VueAxios from 'vue-axios'Vue.use(VueAxios,axios)/* eslint-disable no-new */
new Vue({el: '#app',router,store,data(){return{Bus:new Vue()}},components: { App },template: '<App/>'
})

取值

<template><div style="padding: 60px;"><h1>我是第一个</h1><p>改变state中的值</p>请输入：<input v-model="msg" /><button @click="fun1">获取state</button><button @click="fun2">改变state</button><button @click="fun3">获取state</button><button @click="fun4">请求后台</button></div>
</template><script>export default {data() {return {msg: '默认值'}},methods: {fun1() {// this.$store-->store/index.js 不推荐let eduName = this.$store.state.eduName;alert(eduName);},fun2() {this.$store.commit('setEduName', {eduName: this.msg})},fun3() {this.$store.dispatch('setEduNameAsync', {eduName: this.msg})},fun4() {this.$store.dispatch('setEduNameByAjax', {eduName: this.msg,_this:this})}}}
</script><style>
</style>

异步

demo1

<template><div style="padding: 60px;"><h1>我是第一个</h1><p>改变state中的值</p>请输入：<input v-model="msg" /><button @click="fun1">获取state</button><button @click="fun2">改变state</button><button @click="fun3">获取state</button><button @click="fun4">请求后台</button></div>
</template><script>export default {data() {return {msg: '默认值'}},methods: {fun1() {// this.$store-->store/index.js 不推荐let eduName = this.$store.state.eduName;alert(eduName);},fun2() {this.$store.commit('setEduName', {eduName: this.msg})},fun3() {this.$store.dispatch('setEduNameAsync', {eduName: this.msg})},fun4() {this.$store.dispatch('setEduNameByAjax', {eduName: this.msg,_this:this})}}}
</script><style>
</style>

demo2

<template><div><h1>我是第二个</h1>{{eduName}}</div>
</template><script>export default{data(){return{msg:'默认值'}},computed:{eduName(){return this.$store.state.eduName;// return this.$store.getters.getEduName;}}}
</script><style>
</style>

在src的action.js中配置后台请求的地址

   'VUEX_AJAX': '/vuex/queryVuex', //Vuex的后台异步请求

在src的store模块中编写actions.js

 export default {setEduNameByAsync: function(context, payload) {setTimeout(() => {//这里的setEduName(事件类型)是指mutations.js中的setEduName事件context.commit('setEduName', payload);}, 10000);//10000是指10秒之后执行这个事件},setEduNameByAjax: function(context, payload) {let _this=payload._this;//定义后端都请求地址let url = _this.axios.urls.VUEX_AJAX;let params = {resturantName: payload.eduName}_this.axios.post(url, params).then(r => {console.log(r);}).catch(e => {console.log(e);});}}

效果图展示