Vuex-v4.x

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

下面举个改变用户名的例子来实现上面的流程图：

index.vue

<template>

  <div>

    userName: <span>{{ $store.state.userName }}</span>

    <br />

    <button @click="changeName">改变名字</button>

  </div>

</template>

<script>

import { useStore } from "vuex";

export default {

  setup() {

    const store = useStore();

 

    const changeName = () => {

      store.dispatch("updateUserName", "李四");

    };

    return { changeName };

  },

};

</script>

<style lang="scss" scoped>

</style>

store文件夹下index.js

import { createStore } from 'vuex'

// 创建一个新的 store 实例

const store = createStore({

    state() {//是存储的单一状态

        return {

            userName: "张三"

        }

    },

    mutations: {//通过 store.commit 方法出发对应函数状态变更      

        updateUserName: function (state, value) {

            state.userName = value

        }

    },

    actions: {

        updateUserName: function (context, payload) {//context与store实例具有相同的属性和方法的对象

            //正常这里写访问后台接口，后台返回成功了,再执行commit

            context.commit('updateUserName', payload)

        }

    },

})

export default store

 

运行效果：

点击按钮后

 

 

出　　处：https://www.cnblogs.com/xiao-wo-niu/
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。