Vuex的使用，详细易懂

目录

一.前言

二.Vuex的简介

三.vuex的使用

 3.1 安装Vuex

          3.2 使用Vuex的步骤：

四.vuex的存值取值（改变值）

五.vuex的异步请求

好啦，今天的分享就到这啦！！！ 

---

一.前言

        今天我们继续前面的Element讲解Vuex的使用，相关文章：
http://t.csdnimg.cn/3hnpNhttp://t.csdnimg.cn/3hnpN

二.Vuex的简介

        Vuex是Vue.js的官方状态管理模式。它被设计为更好地管理应用程序的状态，并且可以轻松地与Vue.js应用程序集成。

Vuex的核心概念包括state（状态），mutations（变化），actions（动作）和getters（获取器）。

• State：即存储数据的地方。它保存着整个应用程序的状态，并且可以在不同的组件中共享。通过在Vue组件中使用this.$store.state来访问状态。

• Mutation : 是改变状态的唯一方式，类似于组件的methods属性。它是同步的，用于修改state中的数据。

• Actions：Actions用于处理异步操作和提交Mutations。它们可以包含任意异步操作，例如异步请求、定时器等。Actions通过store.dispatch方法来触发。

• Getters：Getters用于从State中派生出一些状态，类似于计算属性。它们可以通过store.getters方法来获取。

     ---------用图片的方式理解：

三.vuex的使用

        3.1 安装Vuex

        如果node.js的版本是10那么就用  npm install vuex -S

        如果node.js的版本是18或者10以上就用   npm i -S vuex@3.6.2

 在设置中环境变量中可以查看：

 在我们使用的文件目录下输入：        

       查看结果：

3.2 使用Vuex的步骤：

1. 创建store：在src目录下创建store.js文件，引入Vue和Vuex，并创建一个新的Vuex.Store实例。

2. 定义state：在store.js文件中定义一个state对象，用于存储数据。

3. 定义mutations：在store.js文件中定义mutations对象，包含一些用于修改state的方法。

4. 定义actions：在store.js文件中定义actions对象，包含一些用于触发mutations的方法。

5. 在组件中使用Vuex：在需要使用state的组件中，通过this.$store.state来获取state中的数据。

6. 在组件中触发mutations和actions：在需要修改state的组件中，通过this.$store.commit来触发mutations，通过this.$store.dispatch来触发actions。

   

四.vuex的存值取值（改变值）

        先在src下面创建一个store目录，创建state（状态），mutations（变化），actions（动作）和getters（获取器）这四个js文件

        在state.js里面定义默认值：

export default {
  eduName: '默认值~~'
}

        在mutations.js 里面设置改变值：

export default {
  // type(事件类型)： 其值为setEduName
  // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器
  setEduName: (state, payload) => {
    state.eduName = payload.eduName;
  }
}

         在getters.js里面获取值：

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

在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 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'
import Vuex from 'vuex'

//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')

// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
//添加vuex
import store from './store'

// 新添加3
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: '<App/>'
})

最后测试：

page1.vue:

<template>
  <div>
    <h1>第一个界面</h1>
    请输入：<input v-model="msg" />
    <button @click="fun1">获取值</button>
    <button @click="fun2">改变值</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: '默认值'
      }
    },
    methods: {
      fun1() {
        let eduName = this.$store.state.eduName;
        alert(eduName);
      },
      fun2() {
        this.$store.commit('setEduName', {
          eduName: this.msg
        })
        let eduName = this.$store.state.eduName;
        // alert(eduName);
      }
    }
  }
</script>

<style>
</style>

 page2.vue:

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>页面二</h1>
    {{eduName}}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mag: '弹射下班'
      }
    },
    computed: {
      eduName() {
        return this.$store.state.eduName;
      }
    }
  }
</script>

<style>
</style>

结果：

五.vuex的异步请求

        在page1里面：

 <!-- 异步请求  同一时间可以做多件事情 -->
     <button @click="fun3">改变值</button>

 fun3(){
        this.$store.dispatch("setEduNameByAsync",{
          eduName:this.msg
        })
      },

在action.js里面：

 export default {
   setEduNameByAsync: function(context, payload) {
     setTimeout(() => {
       //这里的setEduName(事件类型)是指mutations.js中的setEduName事件
       context.commit('setEduName', payload);
     }, 7000);
     //7000是指7秒之后执行这个事件
   },
   setEduNameByAjax: function(context, payload) {

     let _this=payload._this;
     //定义后端都请求地址
     let url = _this.axios.urls.VUEX;
     let params = {
       resturantName: payload.eduName
     }
     _this.axios.post(url, params).then(r => {
       console.log(r);
     }).catch(e => {
       console.log(e);
     });
   }
 }

        结果：

好啦，今天的分享就到这啦！！！