vue的基础学习(六) - vuex

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

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

    (3)怎么使用？
        
        1.下载 - npm i vuex / yarn add vuex

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

         store.js
            import Vue from 'vue'
            import Vuex from 'vuex'

            Vue.use(Vuex)

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

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

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

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

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

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

            export default store;

              

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

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

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

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

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

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

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

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

        4.getter: 和vue的computed一样