vue的基础学习(六)vuex

   (1)概念&＃xff1a;一个存放若干组件共用的数据的仓库

    (2)什么时候使用vuex&＃xff1a;
        当用户交互比较复杂&＃xff0c;组件之间数据传值比较复杂的时候使用
        让项目易于维护&＃xff0c;并且让项目代码更加简洁

    (3)怎么使用&＃xff1f;
        
        1.下载 - npm i vuex / yarn add vuex

        2. 创建文件与main.js同级 - store.js

         store.js
            import Vue from &＃39;vue&＃39;
            import Vuex from &＃39;vuex&＃39;

            Vue.use(Vuex)

            //创建仓库,用于存放公共数据&＃xff0c;整个项目只能有一个store
            cosnt store &＃61; new Vuex.store({

                //状态&＃xff1a;所有的公共数据都存放在这个配置项下面
                state:{
                    name:&＃39;&＃39;,
                    age: &＃39;&＃39;,
                    people:[
                        {id:0,name:&＃39;aa&＃39;,age:10},
                        {id:0,name:&＃39;vv&＃39;,age:100}
                    ]
                },

                //改变&＃xff1a;修改state中数据的唯一方法 - 只能是同步的
                mutations:{
                    //方法&＃xff1a; 
                        方式一传值&＃xff1a; 形参1&＃xff1a;state中的所有数据
                                    形参2&＃xff1a; 传入数据 - &＃39;xxx&＃39;

                        方式二传值&＃xff1a; 形参1&＃xff1a;state中的所有数据
                                    形参2&＃xff1a;一个对象{
                                        type:&＃39;changeName&＃39;, 
                                        newName:&＃39;xxx&＃39; 
                                    }
                    changeName(state,value){
                        state.name &＃61; &＃39;王二麻子&＃39;
                    },
                    changeAge(state,val){
                        state.age &＃61; val;
                    }
                },

                //异步改变
                actions:{
                    //方法  形参-context &＃61;&＃61;&＃61; store
                    async changeAge(context){
                        let res &＃61; await getGoods();

                        //修改mutation的数据
                        context.commit(&＃39;changeName&＃39;,res)
                    }
                },
              
                //veu版本的计算属性computed
                getters:{
                    //获取年纪大于18的人
                    getMoreThan18(state){
                        return state.peple.filter( item &＃61;> item.age>18 )
                    }
                }
            })

            export default store;

        3. main.js 引入   import store from &＃39;./store&＃39;
                   注入    new Vue({
                            store //key必须是store
                          })

        4.组件使用 - this.$store 可以访问store中的所有数据
                    this.$store.state.name 
                    this.$store.commit(&＃39;事件名&＃39;,&＃39;xx&＃39;)

              建议使用&＃xff1a;通过computed属性接收state中的数据&＃xff0c;然后在模板里面使用computed
                      的属性进行渲染&＃xff0c;提升渲染性能

                    如果直接用this.$store.state.name 进行渲染&＃xff0c;每次界面更新都会从新去state中
                    获取数据&＃xff0c;尽管state中的数据未发生改变
            {{name}}
            computed:{
                name(){
                    return this.$store.state.name;
                }
            }

    
    (4).核心概念
        1.state : 存放公共的数据

        2.mutation : 修改state的唯一方式
         ①触发一个mutation修改数据
                    1. store.commit(&＃39;changeName&＃39;,&＃39;xxx&＃39;)
                        形参1&＃xff1a;mutation的事件名
                        形参2&＃xff1a;传入数据
                    
                    2.store.commit({
                        type:&＃39;changeName&＃39;, //表示触发的函数
                        newName:&＃39;xxx&＃39; //传入参数
                    })

        3.actions: 可以包含异步操作&＃xff0c;但是修改数据还是需要触发mutations
                ②触发actions
                    1.store.dispath(&＃39;事件名&＃39;)

                    2.store.dispath({
                        type:&＃39;changeAge&＃39;, //表示触发的函数
                        newAge:&＃39;xxx&＃39; //传入参数
                    })

        4.getter: 和vue的computed一样