IT小白

这个屌丝很懒，什么也没留下！

热门标签

Vuex怎么使用？来看看吧~_vuex的使用

作者：IT小白 | 2024-03-17 16:35:50

踩

vuex的使用

③总线:vue根实例中定义变量，这个变量也是vue实例

二、Vuex的安装以及store.js的使用

1、vuex使用步骤

1.1 安装

npm install vuex -s 【下载Vuex最新的版本】

1.2 导入Vuex的核心4个组件，然后通过index.js加载进来

1.3 将Vuex对应的index,js 挂载到 main.js 中的vue实例中

一、Vuex的简介

1、为什么要学习Vuex?

解决了前端组件传参的问题。

组件传参：

①子传父：$emit

②父传子：props

③总线:vue根实例中定义变量，这个变量也是vue实例

2、什么是Vuex?

官方图解Vuex：

图解Vuex各组件:

变量传值的演变方式：

Vuex的核心组件：

sate.js 存储变量

Getters.js 获取变量值、

mutations.js 改变变量值（同步）

actions.js 改变变量值（异步）

二、Vuex的安装以及store.js的使用

1、vuex使用步骤

1.1 安装

npm install vuex -s 【下载Vuex最新的版本】

下载之后【package.json】里会出现vuex

1.2 导入Vuex的核心4个组件，然后通过index.js加载进来

建立store文件，将【actions.js】、【index.js】、【mutations.js】、【state.js】、【getters.js】添加进去

1.3 将Vuex对应的index,js 挂载到 main.js 中的vue实例中

1.4 测试Vuex的存储变量的功能

记得更改vuex依赖的版本运行一下命令

npm i -S vuex@3.6.2

【state.js】


export default{
  resName4:'cc咖啡馆'
}

【router/index.js】


import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import TopNav from '@/components/TopNav'
import LeftNav from '@/components/LeftNav'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import Articles from '@/views/sys/Articles'
import VuexPage1 from '@/views/sys/VuexPage1'
 
Vue.use(Router)
 
export default new Router({
  routes: [{
      path: '/',
      name: 'Login',
      component: Login
 
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
 
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
 
    }
    ,
        {
          path: '/AppMain',
          name: 'AppMain',
          component: AppMain,
          children: [{
              path: '/LeftNav',
              name: 'LeftNav',
              component: LeftNav
 
            },
            {
              path: '/TopNav',
              name: 'TopNav',
              component: TopNav
 
            },
            {
              path: '/sys/Articles',
              name: 'Articles',
              component: Articles
 
            },
            {
              path: '/sys/VuexPage1',
              name: 'VuexPage1',
              component: VuexPage1
 
            }
          ]
 
        }
  ]
})

【VuexPage1.vue】


<template>
  <div>
    <p>欢迎来到{{msg}}</p>
  </div>
</template>
 
<script>
  export default {
    name: 'VuexPage1',
    data () {
      return {
      }
    },
    computed:{
      msg(){
        console.log(this.$store)
        //  从vuex 的 state 文件中获取值
        return this.$store.state.resName;
        // this.$router.push()...
        // this.$root
      }
    }
  }
 
</script>
 
<style>
</style>

运行效果展示：

三、Vuex中的设置及获取变量值

是通过方法去获取值。

【VuexPage2.vue】


<template>
  <div>
    <p>页面2：欢迎来到{{msg}}</p>
  </div>
</template>
 
<script>
export default {
  name: 'VuexPage2',
  data () {
    return {
    }
  },
 
  computed:{
    msg(){
    //  从vuex的state文件中获取值
    //   return this.$store.state.resName;——>不推荐，不安全
    //  通过getters.js文件获取state.js中定义的变量值
      return this.$store.getters.getResName;
    }
  }
}
</script>
 
<style scoped>
 
</style>

【router/index.js】


import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from "../components/HelloWorld";
import AppMain from "../components/AppMain";
import LeftNav from "../components/LeftNav";
import TopNav from "../components/TopNav";
import Login from "../views/Login";
import Reg from "../views/Reg";
import Articles from "../views/sys/Articles";
import VuexPage1 from "../views/sys/VuexPage1";
import VuexPage2 from "../views/sys/VuexPage2";
 
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/sys/Articles',
          name: 'Articles',
          component: Articles
        },
        {
          path: '/sys/VuexPage1',
          name: 'VuexPage1',
          component: VuexPage1
        },
        {
          path: '/sys/VuexPage2',
          name: 'VuexPage2',
          component: VuexPage2
        }
      ]
    }
  ]
})

【mutations.vue】


export default{
  // 定义一个setResName的方法
  setResName:(state,payload)=>{
  // sate对象就对应了sate.js中的对象
  // payload载荷 对应的 传递的 josn对象参数(name:zs,age:12)
  state.resName = payload.resName;
  }
}

【getters.js】


// 拿
export default{
  getResName:(state)=>{/* 这里的sate代表的是sate.js整个文件 */
    return state.resName;
  }
}

效果运行：点击按钮

就会出现以下效果:

（角色管理）VuexPage2.vue

点击按钮之后：

四、Vuex中的异步同步操作

【VuexPage1.vue】


<template>
  <div>
    <p>页面1：欢迎来到{{msg}}</p>
    <button @click="buy">买下它</button>
     <button @click="buyAsync">最终店长</button>
  </div>
</template>
 
<script>
export default {
  name: 'VuexPage1',
  data () {
    return {
    }
  },
  methods:{
    buy(){
      // 通过commit方法会调用mutation.js中定义好的方法
      this.$store.commit("setResName",{
        resName:'KFC'
      })
    },
    buyAsync(){
      this.$store.dispatch("setResNameAsync",{
        resName:'麦当劳'
      })
    }
  },
  computed:{
    msg(){
    //  从vuex的state文件中获取值
    // return this.$store.state.resName; 不推荐，不安全
    //  通过 getters.js文件获取 state.js中定义的变量值
        return this.$store.getters.getResName;
    }
  }
}
</script>
 
<style scoped>
 
</style>

【actions.js】


export default{
  setResNameAsync:(context,payload)=>{
    // 异步修改值 在异步的方法里调用同步方法
    // context 指的是Vuex的上下文,相当于 this.$store
    // 此代码6秒钟后执行
    setTimeout(function(){
      context.commit("setResName",payload);
    },6000);
 
  }
}

效果演示：

先点按钮最终的店长，然后点按钮盘它：

时隔6秒之后，发生改变：

五、Vuex后台交互

【actions.js】


export default {
  setResNameAsync:(context,payload)=>{
  // 异步修改值 在异步方法中调用了同步方法
  //  context指的是Vuex的上下文，相当于 this.$store
  // 死代码，6秒后执行
    setTimeout(function (){
      context.commit("setResName",payload);
    },6000);
 
    let _this=payload._this;
    let url=_this.axios.urls.SYSTEM_MENU_TREE;
    _this.axios.post(url,{}).then(r=>{
      console.log(r);
    }).catch(e=>{
 
    });
  }
}

【VuexPage1.vue】


<template>
  <div>
    <p>页面1：欢迎来到{{msg}}</p>
    <button @click="buy">盘它</button>
    <button @click="buyAsync">最终的店长</button>
  </div>
</template>
 
<script>
export default {
  name: 'VuexPage1',
  data () {
    return {
    }
  },
  methods:{
    buy(){
      //通过commit方法 会 调用 mutations.js文件中定义好的方法
      this.$store.commit("setResName",{
        resName:'鸡肉味的猫粮'
      })
    },
    buyAsync(){
      this.$store.dispatch("setResNameAsync",{
        resName:'杨总',
        _this:this
      })
    }
  },
  computed:{
    msg(){
    //  从vuex的state文件中获取值
    //   return this.$store.state.resName;——>不推荐，不安全
    //  通过getters.js文件获取state.js中定义的变量值
      return this.$store.getters.getResName;
    }
  }
}
</script>
 
<style scoped>
 
</style>

运行：

本篇内容分享到此结束，我们下期再见！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/257070