VUEX的基础使用存值及异步

目录

什么是VUEX

 有什么作用

 安装

取值

异步

---

什么是VUEX

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

 有什么作用

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

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

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

4. 快速的状态更新：通过定义 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 = false
 
import 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: ''
})

取值

<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);
     });
   }
 }

效果图展示