添加 vuex 的依赖
cd /你的 vue 项目
# 在项目下安装 vuex
npm install --save vuex
vue 中配置 vuex
打开 main.js
import Vue from 'vue'
import App from './App.vue'
// 引入 vuex
import Vuex from 'vuex'
// 加载 vuex 到项目中
Vue.use(Vuex)
// 创建一个 vuex 的实例
const store = new Vuex.Store({
})
Vue.config.productionTip = false
new Vue({
// 在项目中使用这个实例
store,
render: h => h(App),
}).$mount('#app')
使用 vuex
main.js 中的代码
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 全局变量
state: {
count: 0
},
// 方法
mutations: {
// 参数名可以随便设置。但是第一个参数(state)一定是上方state的实例，这个不需要我们传递。
// 从第二个(包括)参数开始往后都是我们调用时传递的。
increment(state, n) {
if (n == undefined || n == null || n == '') {
state.count += 1;
return
}
state.count += n;
},
},
// 异步方法
// actions 和 mutations 不同之处在于，actions 是异步的 mutations 是同步的。
actions: {
// {commit} 代表传入可调用 mutations 模块，⚠️ 这个名字是固定的。
// 从第二个(包括)参数开始往后都是我们调用时传递的。
increment({commit}, n) {
// Vuex 的 actions 应该避免直接操作 state，state 的更改应该由 mutations 去修改，不然 vue-devtools 插件记录不到 state 变更，
// actions 可以根据当前 state 进一步处理数据，计算或请求后端接口，然后通过 commit 的形式提交给 mutations 去处理。
setTimeout(() => {
// 调用 vue 中的 mutations 中的方法必须使用到 commit。
commit('increment', n)
}, 3000)
}
},
// 可以理解成 vue 中的计算属性。
getters: {
// 监视全局变量是否发生变化，如果发生变化。返回给调用者 乘2 的值
doubleCount(state) {
return state.count * 2;
},
}
})
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
app.vue 中的代码
<template>
<div id="app">
<!-- 通过计算属性，获取 vuex 中的值 -->
{{ count }} <br>
<!-- 直接获取 vuex 中的值 -->
{{ $store.state.count }}<br>
<!-- 调用 vuex 的计算属性 -->
{{ $store.getters.doubleCount }}<br>
<!-- 第一个参数设置你要调用 mutations 中的那个方法，第二个往后是传递的参数。可以不传或多传 -->
<button @click="$store.commit('increment',2)">add</button>
<!-- 第一个参数设置你要调用 actions 中的那个方法，第二个往后是传递的参数。可以不传或多传 -->
<button @click="$store.dispatch('increment',2)">add</button>
</div>
</template>
<script>
export default {
name: 'App',
computed: {
count() {
return this.$store.state.count
}
}
}
</script>
<style>
</style>
