目录
安装
注意这里如果使用的是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>
