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)
    }
  }