vuex

vuex是用来保存组件之间的共享数据，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过props和emit来进行传值

安装    

npm i vuex -s

在main.js引入并使用

import vuex from 'vuex'
vue.use(vuex);

创建

const store =new Vuex.Store( {
    state : {   //state类似于vue中的data，用来存放共享数据的 
        count : 0
    },
    mutations : {   //类似于vue中的methods，用来存放方法的
        fn(state) {
            state.count++;
        }
    },
    getters: {  //类似于vue中的computed和filter
        orderFn(state)  {
           return 'count的值为：'+state.count
        }        
})

其中state类似于vue中的data，用来存放共享数据的

在组件中通过$store.state.count / this.$store.state.count来进行访问

 <p>当前数量为；{{$store.state.count}}</p>

mutations类似于vue中的methods，用来专门操作state中的数据的（如果要操作state中的数据的话，尽量在mutations中使用，而不是在各组件的methos中使用）

如果组件想要使用mutations中的方法的话，需要通过$store.commit('方法名') / this.$store.commit('方法名') 来进行调用

<button @click="$store.commit('jianNum')">---</button>

<button @click="jian">---</button>
 methods: {
    jian() {
        this.$store.commit('jianNum')
    }
}

如果方法有参数的话：(在mutations的方法中，最多只支持2个参数：1是state、2是自定义参数[如果想要使用多个参数，可以把2定义为arr或obj])

//vuex
mutations: {
    jianNum(state,num) {
      state.count-=num
    }
}

//template
<button @click="$store.commit('addNum',3)">+++</button>

methods: {
     jian() {
         this.$store.commit('jianNum',5)
     }
}

getters只负责对外提供数据，不负责修改数据，如果要修改数据，请用mutations，getters类似于vue中的filter，没有修改state中的值，只不过是对其进行了加工包装，其次和computed类似，当state中的值发生改变时，也会立即触发getters的重新求值

 

 getters: {  //类似于vue中的computed和filter
    orderFn(state)  {
      return 'count的值为：'+state.count
}    
<p>{{$store.geeters.orderFn}}</p>