vuex学习笔记

1. 安装

   - npm add vuex
   - 在main.js中引入 声明(Vue.use(Vuex)) 关联vue实例
   - const store =new Vuex.Store({
       state:{
           count:0
       },
       getters:{ //辅助函数对state数据再处理
        myCount(state){
            return `this ${state.count}`
        }//再在vue文件中引用import { mapGetters } from 'vuex';计算属性中引用 ...mapGetter(['myCount']) 模板中{{myCount}}

       },
       mutations:{  //一般用普通改变状态逻辑
           increment(state){
               //我的未测试错误想法return this.count++
                state.count += 1
           },
           decrement(state){
               state.count -= 1
           }
       },
       actions:{  //用于复杂的业务逻辑 获取异步数据 尽量不传参
            myIncrease(context){
                context.commit('increment')
            },
            myDecrease(context){
                context.commit('decrement')
            }
       }
   })

2. 数据在页面上使用

- 在vue文件中引入 
    import { mapState } from 'vuex';
- components:{
    ...mapState(['count'])
}
- {{count}}

3. 方法绑定

- 在其他vue中
    import { mapMutations } from 'vuex';
    methods:{
        ...mapMutations(['increment','decrement']),
        ...mapActions(['myIncrease','myDecrease'])

        increment(){
            // this.$store.commit('increment') 无需引入nmapMutation
            this.increment() //建议通过mutation改变数据
            //this.$store.state.count += 1
            //this.myIncrease()使用actions
        },
        decrement(){
            // this.$store.commit('decrement')
            this.decrement()
            //this.myDecrease()使用actions
        }
    }
- 在页面上绑定方法@click = 'increment'