Vuex的基本使用


一、什么是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

(0)
上一篇 2022年10月2日
下一篇 2022年10月2日

相关推荐

发表回复

登录后才能评论