Vuex的使用

目录

安装

注意这里如果使用的是vue2版本需要指定vuex版本为3，如果用的是vue3版本那可以用最新的vuex

npm i vuex@3

配置

在src目录下新建store文件夹，并在其中新建index.js

index.js做如下配置

import Vue from "vue"
import Vuex from "vuex"
//使用Vuex
Vue.use(Vuex)
//准备actions用于响应组件中的动作
const actions = {
}
//准备mutations用于操作数据
const mutations = {
}
//准备state用于存储数据
const state = {
}
export default new Vuex.Store({
    actions,
    mutations,
    state
})

以上配置也符合Vuex提供的概念图

然后我们需要在main.js中引入该文件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
//引入Vuex的配置文件
import store from "./store/index.js"

new Vue({
  render: h => h(App),
  //传入store
  store,
}).$mount('#app')

使用

下面以一个加数量的案例来演示简单的使用方法

首先在store->index.js文件中加入数据和函数

import Vue from "vue"
import Vuex from "vuex"
//使用Vuex
Vue.use(Vuex)
//准备actions用于响应组件中的动作
const actions = {
    jia(ctx,value){
        //交给mutations处理
        ctx.commit("JIA",value)
    }
}
//准备mutations用于操作数据
const mutations = {
    JIA(state,value){
        //操作数据
        state.sum += value
    }
}
//准备state用于存储数据
const state = {
    sum:0
}

export default new Vuex.Store({
    actions,
    mutations,
    state
})

然后创建Sum组件，组件中展示的数据为store->index.js文件中配置的数据sum，然后按钮点击触发的是store->index.js中actions下的jia函数

<template>
    <div>
        <h1>当前和为：{{$store.state.sum}}</h1>
        <button @click="add">加</button>
    </div>
</template>

<script>
    export default{
        methods:{
            add(){
                this.$store.dispatch("jia",1)
            }
        }
    }
</script>

<style>
</style>