一、什么是Vuex?
概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,定义一系列规范来对 vue 中多个组件的共享状态进行使用和操作数据,也是一种组件间通信的方式,且适用于任意组件间通信。
二、Vuex的核心概念
- state:存放着需要共享的数据。 mutations:存放着对state的数据进行修改的函数,你不能直接改变 store 中的状态,改变 store 中数据的唯一途径就是提交 (commit) mutations中的函数对数据进行修改。
三、Vuex的具体使用方法
2.1 Vuex插件的安装
在命令提示符窗口里面输入:vue -V,查看你安装的Vue-cli的版本号。
vue2版本中只能安装vuex3版本;vue3版本中只能安装vue4版本。
我的vue是2版本,所以安装命令:npm install vuex@3
2.2 创建一个store数据仓库
在src文件夹下创建store文件夹,在store文件夹下新建index.js,内部代码如下:
import Vue from vue import Vuex from vuex Vue.use(Vuex) export default new Vuex.Store({ //store存放需要共享的数据 state:{ count:0 }, //mutations存放着对共享的数据进行修改的函数方法 mutations:{ //定义了一个对count数据进行自增的increment函数 increment (state) { state.count++ }, //定义了一个对count数据进行自减的decrement函数 decrement(state){ state.count-- } } })
2.3 在main.js中引入store数据仓库,并在vue实例中使用,main.js的代码如下:
import Vue from vue import App from ./App import router from ./router //import router from @/router/index.js import store from ./store //import store from @/store/index.js Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: #app, router, //roter:router store, //store:store components: { App }, template: <App/> })
2.4 在HelloWorld.vue中获取及修改store仓库中的state数据
<template> <div class="hello"> <h1>{ {msg}}</h1> <h1>{ {$store.state.sum}}</h1> <button @click="jia()"> 加 1 </button> <button @click="jian()"> 减 1 </button> </div> </template> <script> export default { name: HelloWorld, data () { return { msg:欢迎来到首页面 } }, mounted(){ console.log(this) }, methods:{ jia(){ //使用commit调用store中的mutations的方法increment,对state的数据修改 this.$store.commit(increment) }, jian(){ //使用commit调用store中的mutations的方法decrement,对state的数据修改 this.$store.commit(decrement) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
四、Mutations传递参数
在上面的案例中计算页面有一个自增 + 和自减 – , 如果需要+5, +10, -100这时候怎么处理呢? 那我们需要定义一个方法接收参数,那么在Mutation中如何定义参数, 又如何传递参数呢?
第一步:在HelloWorld.vue组件定义两个按钮, 一个+5, 一个减-2:
<button @click="jia(5)"> 加 5 </button> <button @click="jian(2)"> 减 2 </button>
第二步:在HelloWorld.vue组件定义两个带参数的jia( number )方法和jian( number )方法:
methods:{ jia(number){ }, jian(number){ } }
第三步:在store中定义2个mutation方法, 并且接收一个参数num, 如下addNumber和reduceNumber。
mutations:{ addNumber(state,num){ state.sum=state.sum+num }, reduceNumber(state,num){ state.sum=state.sum-num } }
addNumber()和reduceNumber()方法的第一个参数是state, 我们可以用第二个参数来接收变量。
第四步:在HelloWorld中的methods的jia( number )方法和jian( number )方法函数体中调用store的addNumber和reduceNumber方法。
methods:{ jia(number){ this.$store.commit(addNumber,number) }, jian(number){ this.$store.commit(reduceNumber,number) } }
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/290387.html