Vuex的使用

最新推荐文章于 2024-10-04 00:46:18 发布

theHider

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量54

点赞数

文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/theHider/article/details/132030924

版权

1.引入Vuex

1.1背景

vue中各个组件之间传值

1）父传子，子传父。

缺点是不适用于跨组件通信

2）通过事件总线EventBus传值

缺点是不便于管理

1.2Vuex介绍

1）Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作

2）Vuex分为5个部分：

1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步操作
5.Module：将vuex进行分模块

2.Vuex使用步骤

2.1安装

npm i -S vuex@3.6.2

2.2创建store模块及以下文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2nh9itRx-1690809817010)(C:\Users\Administrator\Desktop\0731-01.png)]

2.3分别在文件中编写以下内容

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

state.js, actions.js, mutations.js, getters.js

export default{
  
}

2.4在main.js中导入并使用store实例

new Vue({
el: '#app',
router,
store, //在main.js中导入store实例
components: {
App
},
template: '<App/>',
data: {
//自定义的事件总线对象，用于父子组件的通信
Bus: new Vue()
}
})

3.Vuex的核心概念

3.1store

每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

const store = new Vuex.Store({
state,    // 共同维护的一个状态，state里面可以是很多个全局状态
getters,  // 获取数据并渲染
actions,  // 数据的异步操作
mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
})

3.2state

用于存储全局读写的数据

export default{
  resName:'小猪餐馆'
}

3.3getters

获取数据并渲染

export default{
  getResName:(state)=>{
    return state.resName;
  }
}

3.4mutations

处理数据的唯一途径，state的改变或赋值只能在这里

export default{
  setResName:(state,payload)=>{
    // state对象就对应了state.js中的对象
    // payload载荷 对应的传递的json对象参数【name:zs,age:13】
    state.resName = payload.resName;
  }

}

3.5actions

异步修改数据，并进行前后端交互

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;
_this.axios.post(url,{}).then(r=>{
console.log(r);
}).catch(eror=>{

});

}

}

Page01

<template>
  <div>
    书籍新增
    <p>欢迎来到{{msg}}</p>
    <button @click="buy">盘它</button>
    <button @click="buyAsync">最终店长</button>
  </div>
</template>

<script>
export default{
  name: 'AddBook',
  data(){
    return {

    }
  },
  methods:{
    buy(){
      // 通过commit方法会调用mutations.js文件中定义好的方法
      console.log(this.$store)
      this.$store.commit("setResName",{resName:'KFC'});
    },
    buyAsync(){
      this.$store.dispatch("setResNameAsync",{
        resName:'麦当劳',
        _this:this});
    }
  },
  computed:{
    msg(){
      // 不安全，不推荐使用
      // return this.$store.state.resName;
      // 通过getters.js文件获取state.js中定义的变量值
      return this.$store.getters.getResName;
    }
  }
}
</script>

Page02

<div>
 <p>欢迎来到{{msg}}</p>
</div>


<script>
  computed:{
    msg(){
      // 不安全，不推荐使用
      // return this.$store.state.resName;
      // 通过getters.js文件获取state.js中定义的变量值
      return this.$store.getters.getResName;
    }
  }
}
</script>