Vuex五个核心属性

一、Vuex正常条件下

1、state

类似于组件里的data，
在没有进行vuex分割的情况下使用方式

//vuex里的state
state:{
    count: 666,
    stuscore: [
    {name: "张三", score: 59},
    {name: "李四", score: 98},
    ]
}

其他组件访问取值时方式：
1.1、直接取值

//组件里的计算属性
computed: {
    getcart() {
        return this.$store.state.count
    }，
},

1.2、辅助函数取值（mapState）

//组件里的计算属性
//需要先引入辅助函数
computed:{
    //展开运算符，推荐
    ...mapState({
        getstu:"stuscore",//获取学生分数
        jj(state){
        //state.count是state数据源里的count
        //把vuex里的state里的数据取过来再和当前组件data里的数据混合处理下
            return state.count+"--"+this.onecount
        }
    })
}

2、getters

就像是计算属性一样，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算

//vuex里的getters
getters:{
    jigeren: state => {//不传参
    //Getter 接受数据源state作为其第一个参数
    return state.stuscore.filter(v => {
        return v.score >= 70
    })},
    scoregrand: (state, getters) => (grand) => {//传参
    //参数state是数据源state，getters可选是类似于计算属性的getters，grand是其他组件传来的值,可以根据传来的值筛选符合条件的数据返给组件
        return state.count*grand
},}

访问方式：
2.1、直接不传参访问

computed:{
    jige(){
    //获取vuex里getters里的计算属性值
        return this.$store.getters.jigeren
},}

2.2、直接传参访问

computed:{
    good(){
        return this.$store.getters.scoregrand(10)
},}

2.3、辅助函数访问（mapGetters）

//先引入辅助函数
computed:{
    ...mapGetters(["aa","bb"])//aa和bb分别是vuex共享的getters里的计算属性里函数名
}
//如果你想将一个 getter 属性另取一个名字，使用对象形式：
computed:{
    ...mapGetters({
        //aa和bb分别是vuex共享的getters里的计算属性里函数名
        haha:"jigeren",
        gugu:"scoregrand"
        /*
        haha是当前组件计算属性名，jigeren是vuex里的getters里的计算名，也可以用数组，前后计算属性名一样例如...mapGetters(['jigeren','scoregrand'])
        */
    })
}

3、mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：类似于组件里的methods方法

mutations:{
    //第一种方式不传参
    addscore(state) {
        state.stuscore.forEach(v => {
            v.score++
    })},
    //第二种方式传参
    addscore(state, n) {
        state.stuscore.forEach(v => {
            v.score+= n
    })},
}

调用方式：
3.1、直接调用

methods:{
    jiafen(){//不传参
        this.$store.commit("addscore")//jiafen是body里@click="jiafen"
},
//或者
methods:{
    jiafen(v){//传参
        this.$store.commit("addscore",v)//jiafen是body里@click="jiafen"
},

3.2、辅助函数调用（mapMutations）

//引入辅助函数
import {mapMutations} from "Vuex"
methods:{//传参
	...mapMutations({
        jiafen:"addscore"//jiafen是body里	@click="jiafen(10)"
})}

//引入辅助函数
import {mapMutations} from "Vuex"
methods:{//传参
	...mapMutations("departmentCode", ["setDepartmentCode", "clearDepartmentCode"])
	}

4、actions

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含*任意异步操作 *。

actions:{
    luckystudent(context){
        setTimeout(()=>{
            context.commit("luckystudent")//luckystudent是mutations里的方法
        },5000)}
}

触发方式
4.1

methods:{
    luckydog(){
        this.$store.dispatch("luckystudent")
    }
}

二、Vuex切割成多个模块情况下

原Vuex的store下的index.js内容改为

import Vue from 'vue'
import Vuex from 'vuex'
import cart from "../cart/cart"
import student from "../student/student"
Vue.use(Vuex)
export default new Vuex.Store({
    /**
     *由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得复杂时，store对象就会变得相当臃肿，为了解决这个问题，vuex允许我们将store分割成模块每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
     * */
    modules: {
    //cartObj为给分割出的模块起的名字，cart为模块名
        cartObj: cart,
        stuObj: student
    }
})

其他Vuex分出的模块内容是

export default {
    state: () => ({
        stuscore: [{name: "张三", score: 59}]
    }),
    mutations: {
        addscore:state=>{
            state.stuscore[Math.floor(Math.random()*10)].score+=5
        }
    },
    actions: {
        luckdog(context){
            setTimeout(()=>{
                context.commit("addscore")
            },1000)
        }
    },
    namespaced: true
    //vuex中的store分模块管理，需要在store的index.js中引入各个模块，为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名
}

1、获取模块里state数据语法

1、直接访问

this.$store.state.模块名.数据名

2、辅助函数mapState

...mapState("cartObj",["cart"])
//cartObj是store下index.js里命名的分模块名，cart是对应分模块里的state里的数据

2、获取模块里getters方法的语法

2.1、不传参

this.$store.getters["模块名/计算属性名"]
//注意：这个斜杠不是或者,是对应模块名下的getters里的计算属性名

2.2、传参

this.$store.getters['模块名/计算属性名'](参数);

2.3、辅助函数（mapGetters）

//先引入辅助函数，方法同上上面有
...mapGetters("cartObj",{
                totalmoney:"totalprice"
            })
//cartObj是分模块名，totalprice是分模块里对应的方法，
//totalmoney是当前组件的方法名，写在@click="totalmoney"

3、调用模块里mutations方法的语法

3.1、不传参

this.$store.commit("cartObj/upprice")

3.2、传参

this.$store.commit("模块名/方法名",参数)

3.3、辅助函数（mapMutations）

...mapMutations("cartObj",{
         discount2:"discount"
     })

```javascript
//引入辅助函数
import {mapMutations} from "Vuex"
methods:{//传参
	...mapMutations("departmentCode", ["setDepartmentCode", "clearDepartmentCode"])
	}

4、调用模块里actions方法语法

this.$store.dispatch("stuObj/luckdog")