vuex上手

核心概念

• modules 模块
  • state 状态
  • getters 获取状态属性
  • mutations 改变状态（同步）
  • acitons 改变状态（异步）

示例代码

本示例托管在gitee博客

1. CDN方式引入vue、vuex

• 外国cdn

  • https://unpkg.com/vue

  • https://unpkg.com/vuex

• gitee博客托管：

  • https://koalamini.gitee.io/library/vue.min.js
  • https://koalamini.gitee.io/library/vuex.js

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

2. vuex示例

<script type="text/javascript">
    const modulesA = {
        // 命名空间
        namespaced: true,
        // 状态
        state: () => ({
            todos: [{
                id: 1,
                text: '已完成的任务',
                done: true
            },
                    {
                        id: 2,
                        text: '未完成的任务',
                        done: false
                    }
                   ]
        }),
        // 获取状态属性
        getters: {
            // 获取完成的任务
            doneTodos: state => {
                return state.todos.filter(todo => todo.done);
            },
            // 获取完成任务的数量
            doneTodosCount: (state, getters) => {
                return getters.doneTodos.length
            },
            // 根据ID获取任务
            getTodoById: (state) => (id) => {
                return state.todos.find(todo => todo.id === id)
            }
        },
        // 改变状态（同步）
        mutations: {},
        // 改变状态（异步）
        actions: {}
    }

const modulesB = {
    namespaced: true,
    state: {
        count: 0
    },
    // 改变状态（同步）
    mutations: {
        // 计数+1
        increment(state) {
            state.count++
        },
        // 计数+n，提交载荷
        incrementPayload(state, n) {
            state.count += n
        }
    },
    // 改变状态（异步）
    actions: {
        incrementAsync(context) {
            setTimeout(() => {
                context.commit('incrementPayload', 10)
                console.log('5秒后，b/count', context.state.count)
            }, 5*1000)
        }
    }
}

// vuex存储
const store = new Vuex.Store({
    modules: {
        a: modulesA,
        b: modulesB
    }
})

// 获取状态
console.log('a/doneTodos', store.getters['a/doneTodos'])
// 改变状态
store.commit('b/increment')
console.log('b/count', store.state.b.count)

new Vue({
    el: '#app',
    store: store,
    data: {
        message: '请按【f12】查看控制台'
    },
    methods: {
        // 计数异步增加
        incrementAsync(){
            // vuex派发
            this.$store.dispatch('b/incrementAsync')
        }
    },
    // 挂载后
    mounted() {
        this.incrementAsync()
    }
})
</script>

运行结果：

• 通过namespaced控制多模块，通过模块/状态属性名访问相应模块的状态属性
• 同步改变状态mutations方式，只能通过store实例方法commit修改，直接修改会报Error in callback for watcher "function () { return this._data.$$state }"错误，详情
• 异步改变状态actions方式，需要通过store实例方法dispatch修改

---

• 本文示例

  • gitee博客托管

• 参考资料

  • Vuex 是什么？ | Vuex (vuejs.org)
  • Vuex状态管理库在HTML中的直接使用例子_flyingdream123的专栏-CSDN博客_html中使用vuex

---

• 创建时间： 2021.12.15.3_14.24.29
• 更新时间： 2021.12.20.1_02.58.23
• 版权作者： 贝可考拉
• 当前版本： v1.0
• 标签分类： #编程开发 #web #vue #vuex