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

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

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

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

mutations-1

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

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

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

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

mutations-2

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

//vuex
mutations: {
    jianNum(state,num) {
    state.count-=num
    }
}
methods: {
    jian() {
        this.$store.commit('jianNum',5)
    }
}

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

getters

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

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

<p>{{$store.geeters.orderFn}}</p>

---