vue中vuex--状态管理模式

vuex介绍
vuex相当于一个仓库 仓库当中存储了组件的状态

vuex有以下五种状态

            state
                就像组件中的data 我们把相关数据存储在state
            getters
                可以从state中得到一个新的数据集合  所以每一个getters函数都有参数state
            mutations
                是唯一可以修改state的入口  想要修改state里边的数据必须使用mutations
                mutations是一个同步操作
            actions
                进行异步操作的 (一般就是请求后台接口数据)  请求到的数据需要存储在state中  我们需要在
                action请求数据还有  调用mutations对state进行修改
            modules
                当前的state  getters mutations actions数据内容太多时候
                可以对当前store中 state  getters  mutations  actions 进行模块分割  分成一个一个小模块
                进行加载使用
                每一个modules 都可以重新包含state  getters  mutations  actions 甚至是modules

vuex安装

            1 使用cdn进行外部引入
            https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min.js
            2 使用npm yarn来自动化构建
            yarn add vuex
            npm i vuex --save-dev

vuex官网参考链接

vuex使用

            1 创建store实例
            const store=new Vuex.Store({
                state: {

                }
            })
            2 把store添加到vue实例中
            new Vue({
                el: "#app",
                store
            })

        想要拿到store中数据 我们需要使用$store.state.属性名来进行获取

        想要获取到getters中 方法数据  我们可以使用  $store.getters.方法名

mutations

       mutations： 是修改我们state值的唯一入口  同步操作
        mutations是一个函数  使用方法类似于自定事件
        mutations可以通过commit方法进行触发

        {
            mutations: {
                自定义方法名(state, payload) {
                    // state对应store仓库中的state
                    state.属性名=新的属性值
                }
            }
        }

        在组建对应的事件函数中
        <p @click="setMsg"></p>

        methods: {
            setMsg() {
                this.$store.commit('自定义方法名')  // commit里边写的就是mutations里边的自定义函数名
            }


            可以传递更多参数
            setMsg() {
                this.$store.commit('自定义方法名', 要传递的数据)   // 要传递的数据可以是所有的数据类型  
            }
        }

actions

        actions是一个异步操作(一般用来请求后台数据)  请求到的数据需要放在state中 
        在actions获取到数据之后  需要调用mutations对state进行修改

        actions需要通过store.dispatch()来进行触发

        actions也可以传递传参数
        格式：
            {
                this.$store.dispatch('actions自定义方法', 要传递的数据)
            }

            actions: {
                自定义方法(context,payload) {
                    context 相当于this.$store
                    console.log(payload)  // 就是接收到的数据
                }
            }

modules

      modules  相当于对我们的store中state getters mutations actions 进行模块分割

        每一个modules中 可以包含state getters mutations actions 甚至是嵌套子模块 modules

        modules: {
            自定义属性名: {
                state: {

                },
                getters: {

                },
                mutations: {

                },
                actions: {

                },
                modules: {

                }
            }
        }