Vuex 的基本使用

添加 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>

扩展内容
github
个人博客