Vuex状态管理机中的提交突变(commit)、动作分发(dispatch)、仓库(store)

最新推荐文章于 2024-07-02 15:49:16 发布

The..Fuir

最新推荐文章于 2024-07-02 15:49:16 发布

阅读量809

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_51066068/article/details/125131985

版权

Vue 专栏收录该内容

86 篇文章 21 订阅

订阅专栏

本文介绍了如何在 Vue.js 应用中使用 Vuex 进行状态管理。通过实例展示了如何创建 store，声明 state、getters、mutations 和 actions，以及如何通过组件调用 commit 和 dispatch 方法来更新状态。此外，还讨论了模块化状态管理，展示了如何处理嵌套的模块状态。

摘要由CSDN通过智能技术生成

Vuex状态管理机模型

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vuex.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <br />
      {{$store.state.storeMsg}}--{{$store.state.username}}
      <br />
      {{$store.getters.nameUpper}}
      <br />
      <!-- commit提交突变 -->
      <!-- dispatch  动作分发 -->
      <button @click="$store.commit('changeInfo','lisi')">提交突变</button>
      <button @click="$store.dispatch('getAllInfo','lisi333')">动作分发</button>

      <br />
      {{storeMsg}}--{{nameUpper}}
    </div>

    <script>
      // import {mapAcitons} from 'vuex'
      // let { mapAcitons, mapMutations, mapGetters, mapState } = Vuex;
      //配置仓库对象
      let storeCom = {
        //初始化声明属性  项目中公共的属性
        state: {
          storeMsg: "状态机msg",
          username: "zhangsan",
          stusInfo: [],
        },
        //可以获取到state中声明的属性，并且能够进行处理再返回
        getters: {
          nameUpper(state) {
            //转换为大写
            return state.username.toUpperCase();

            /*  //会把usname全部改变
            return (state.username = "lisi"); */
          },
        },
        //突变，修改state中的数据只能再mutations里面进行   payload载荷 参数
        mutations: {
          changeInfo(state, payload) {
            console.log(state);
            state.stusInfo = payload;
          },
        },
        //可以异步进行一些请求接口
        actions: {
          getAllInfo(context, payload) {
            //....arr
            let arr = [
              { name: "zhangsan", id: 1 },
              { name: "lisi ", id: 2 },
            ];
            //参数问题   要触发的mutations里的哪个方法
            context.commit("changInfo", arr);
          },
        },
      };

      //声明并初始化一个状态机  仓库对象
      let store = new Vuex.Store(storeCom);
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
        computed: {
          //辅助函数
          ...Vuex.mapState("name", "storeMsg"),
          ...Vuex.mapGetters(["nameUpper"]),
        },
        created() {
          console.log("store", this.$store);
          console.log("store", this.$store.getters);
          console.log("store", this.$store.mutations);
          console.log("store", this.$store.actions);
          console.log("store", this.changeName);
          console.log("store", this.getName);
        },
        methods: {
          ...Vuex.mapMutations(["changName"]),
          ...Vuex.mapAcitons(["getName"]),
        },
        //注册仓库/状态机
        store: store,
      });
    </script>
  </body>
</html>

Vuex中提交突变、动作分发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vuex.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <hr>
        {{$store.state.storeMsg}}-----{{$store.state.name}}
        <hr>
        {{$store.getters.nameUpper}}
        <hr>
        <!-- commit 提交突变 -->
        <button @click="$store.commit('changName','lisi')">提交突变</button>
        <!-- dispatch  动作分发-->
        <hr>
        <button @click="$store.dispatch('getName','lisi33333')">动作分发</button>
        <hr>

        {{storeMsg}}----{{name}} ----{{nameUpper}}
        <hr>
         <button @click="changName('lisi')">提交突变</button>
         <!-- dispatch  动作分发-->
         <hr>
         <button @click="getName('lisi33333')">动作分发</button>

    </div>

    <script>

        // import {mapActions,mapMutations} from 'vuex'

        let {mapActions,mapMutations,mapState,mapGetters} = Vuex

        // 配置仓库对象
        let storeCon = {
            // 初始化声明属性  项目中公共的属性  
            state:{
                storeMsg:'状态机的msg',
                name:'zhangsan',
                // stusInfo:[]
            },
            // 可以获取到state中声明的属性，并且能够进行处理再返回
            getters:{
                nameUpper(state){
                    return state.name.toUpperCase()
                }
            },
            // 突变 修改state中的数据仅能在mutations里面进行 payload载荷 参数
            mutations:{
                changName(state,payload){
                    console.log('mutations',payload);
                    state.name = payload
                }
            },
            // 动作  可以异步请求接口
            actions:{
                getName(context,payload){
                    console.log('actions',context);
                    context.commit('changName',payload)
                }

            }
        }


        
        // 状态机   仓库对象
        let store = new Vuex.Store(storeCon)

        let vm = new Vue({
            el:'#app',
            data:{
                msg:"hello"
            },
            computed:{
                // 辅助函数
                // ...Vuex.mapState(['name','storeMsg']),
                // ...Vuex.mapGetters(['nameUpper']),

                 ...mapState(['name','storeMsg']),
                 ...mapGetters(['nameUpper']),
            },
            created(){
                console.log('store',this.$store);
                console.log('store',this.$store.state);
                console.log('getter',this.$store.getters);
                console.log(8888,this.changName);
                console.log(9999,this.getName);
            },
            methods:{
                // ...Vuex.mapMutations(['changName']),
                // ...Vuex.mapActions(['getName']),
                 ...mapMutations(['changName']),
                 ...mapActions(['getName']),


            },
            // 注册仓库
            store:store
        })
    </script>
    
</body>
</html>

状态机里面的仓库

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vuex.js"></script>
</head>

<body>
    <div id="app">
        {{msg}}
        <hr>
        {{$store.state.msg}}
        <hr>
        {{$store.state.aModule.amsg}}---{{$store.state.bModule.bmsg}}
        <hr>
        {{$store.state.aModule.name}}---{{$store.state.bModule.name}}

        <hr>
        {{name}} ---{{bname}}
        <hr>
        {{amsg}} --- {{bmsg}}

    </div>

    <script>
        let {
            mapActions,
            mapMutations,
            mapState,
            mapGetters
        } = Vuex

        // 初始化 小仓库 设置配置项
        let aModule = {
            namespaced: true,
            state: {
                amsg: 'amsg数据',
                name: 'a小仓库'
            }
        }
        let bModule = {
            namespaced: true,
            state: {
                bmsg: 'bmsg数据',
                name: 'b小仓库'
            }
        }



        // 状态机   仓库对象  大仓库
        let store = new Vuex.Store({
            modules: {
                aModule,
                bModule
            },
            state: {
                msg: 'msg数据',
            }

        })



        let vm = new Vue({
            el: '#app',
            data: {
                msg: "hello"
            },
            computed: {
                // 辅助函数
                //  ...mapState(['name','storeMsg']),
                //  ...mapGetters(['nameUpper']),
                ...mapState('aModule', ['name','amsg']),
                // ...mapState('bModule', ['name']),
                // b小仓库 重命名 第二个参数为对象  属性名为新名字，属性值为原来的属性名
                ...mapState('bModule', {
                    bname:'name',
                    bmsg:'bmsg'
                }),
            },
            created() {
                console.log(this.$store.state);
            },
            methods: {
                //  ...mapMutations(['changName']),
                //  ...mapActions(['getName']),
            },
            // 注册仓库
            store: store
        })
    </script>

</body>

</html>