vueX

什么是vuex：
专门为vue.js应用程序开发的‘状态管理模式’，
采用集中式存储管理应用的所有组件的状态，
以相应的规则保证状态以一种可预测的方式发生变化
状态：
组件内部状态：仅在一个组件内使用的状态（data字段）
应用级别状态：多个组件共用的状态
什么情况下使用vuex:
多个试图依赖于同一状态
来自不同试图的行为需要变更同意状态

---

子组件改变父组件的值：

父：<select-input  :is-show.sync=listShow></select-input>
<!--is-show为自定义的名字，sync为vue约定名-->
export default {
           data(){
                    return { listShow:false}
        }
}
子：
export default {
          props:['isShow'],
          computed:{
                   isintShow(){
                           return this.isShow
                   }
        },
          methods:{
              showListHand(){
                      this.$emit("update:isShow",  !isintShow)
                    }
        }
}

父：<select-input  :data='list' @changTitle='titleHead'></select-input>
meghods:{
titleHead(title){
          获取子组件传过来的title
  }
}
子：
<li @click='getTitle(title)'></li>
export default {
          props:['data'],
          methods:{
          getTitle(title){
                  this.$emit('changTitle',title)
          }
      }
}

使用vueX：

安装：npm install vuex  --save
作为插件引入：  Vue.use(Vue);
定义容器：new Vuex.Store()
注入根实例： {
                          store
                      }

注册流程：

在src目录下新建store文件夹，之后在store文件夹下新建index.js
--------------------
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//定义容器
let store=new Vuex.Store({
    state:{  //放置应用状态数据,一个页面只有一个state,想要改变state里面的值，必须在mutations中
        count: 100
    },
    mutations:{ //vuex中唯一能改变状态是地方
/*可以传值:addIncrement(state,n)
也可以传对象:addIncrement(state,mun)
  第三种方式：  removeIncrement(state,mun){
                              state.count-=mun.n    
                        }*/

        addIncrement(state,n){    //第二个参数是调用函数传递过来的参数
            state.count+=n  
        },
        removeIncrement(state,n){ //第二个参数是调用函数传递过来的参数
            state.count-=1  
        }
    }

})
export default store
------------------
main.js中引入：
import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
------------------------
hello.vue中使用：
export default {
        computed:{
            num(){
                return this.$store.state.count   //调用vuex中的数据
            }
        },
        methods:{
            addHead(){
                //改变状态，提交mutations
      /*可以接受传值:this.$store.commit('addIncrement',n) 
也可以接受传对象:addIncrement(state,obj)       n=obj.n
                removeHead(){
                //this.$store.commit('removeIncrement',5)
                                 //this.$store.commit('removeIncrement',{n:5})
                this.$store.commit({
                    type: 'removeIncrement',
                    n:5
                })
            }
*/
                this.$store.commit('addIncrement',5) 
                              调用vuex中的方法(第二个参数是调用函数传递过来的参数)
            },
            removeHead(){
                this.$store.commit('removeIncrement',5)//第二个参数是调用函数传递过来的参数
            }
        }
    }

异步提交数据：

index.js:
let store=new Vuex.Store({
        state:{  //放置应用状态数据,一个页面只有一个state
        count: 100
        },
          mutations:{ //vuex中唯一能改变状态是地方
        addIncrement(state,obj){
            state.count+=obj.n  
        }
            }
          actions:{ //异步操作
        addAction(context){  //context vue约定参数
 //context 是一个对象，不是当前实例
            setTimeout(()=>{
                //要改变状态，必须提交mutations
                    context.commit('addIncrement',{n:5})

        context.dispatch('textAction',{text:'我被触发了!'})//addAction执行完以后，在执行textAction,可以传参数
            },1000)
        },
            textAction(context,obj){ //注意参数
            console.log('我被触发了');
        }  
    }
})
hello.vue:
          methods:{
            addHead(){
                //改变状态，提交mutations
                // 同步：this.$store.commit('addIncrement',{n:5})
                //异步：
                this.$store.dispatch('addAction')
            }

一值两状态：

index.js
let store=new Vuex.Store({
    state:{  //放置应用状态数据,一个页面只有一个state
        count: 100
    },
    getters:{
        filterCount(state){
            return state.count >=120 ? 120 : state.count

        }
    },
    mutations:{ //vuex中唯一能改变状态是地方

        addIncrement(state,obj){

            state.count+=obj.n  
        },
    /*  removeIncrement(state,n){
            state.count-=n  
        },*/
        removeIncrement(state,mun){
            state.count-=mun.n  
        }
    }
}
hello.vue:
export default {
        computed:{
            num(){
                return this.$store.state.count
            },
            num2(){
                return this.$store.getters.filterCount
            }
        }
}

holle.vue取值的第二种方式：

import {mapState,mapGetters} from 'vuex'
    export default {
        computed:mapState({
            num: state =>state.count,
            num2 : 'count',
            num3 : function (state){
                return state.count+100
            }
或者：
computed:{
            abc(){
                //普通计算属性
            },
            ...mapGetters({num2:'filterCount'}),
            ...mapState(['count'])
        },
        })
}

简化函数调用：

import {mapState,mapGetters,mapActions} from 'vuex'
methods:{
            ...mapActions({
                addHead: 'addAction'
            }),
            addHeads(){
                //改变状态，提交mutations
                // 同步：this.$store.commit('addIncrement',{n:5})
                //异步：
                this.$store.dispatch('addAction')
            }
}

函数传值：

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
...mapMutations({
                removeHeads: 'removeIncrement'
            }),   
以上方式，传值需要在函数调用的时候去传值，无需在这里传值
<input type="button" name="" value="-" @click='removeHead(3)'>
-----------------------------------------------
            removeHead(a){
                //this.$store.commit('removeIncrement',5)
                this.$store.commit({
                    type: 'removeIncrement',
                    n:a
                })
            }