Vuex 详解

Vuex

Vuex 就像眼镜：您自会知道什么时候需要它。

1.state

* 在store中定义数据，在组件中直接使用：

目录：store/index.js

export default new Vuex.Store({
  // state 相当于组件中的data，专门存放全局数据
  state: {
    num:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

目录：Home.vue

<template>
    <div>
        这是numOne的num：{{$store.state.num}}
    </div>
</template>

<script>
    export default {
        name: "numOne"
    }
</script>

或者写为：

<template>
    <div>
        这是numTwo的num：{{num}}
    </div>
</template>

<script>
    export default {
        name: "numTwo",
        computed:{
            num(){
                return this.$store.state.num
            }
        }
    }
</script>

2.getters

* 将组件中统一使用的computed都放到getters里面来操作

目录：store/index.js

export default new Vuex.Store({
  // state 相当于组件中的data，专门存放全局数据
  state: {
    num:0
  },
  //getters相当于组件中的computed，getters是全局的，computed是组件内部的
  getters：{
  	 getNum(state){
      	return state.num
   	 }
  }
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

目录：Home.vue

<template>
    <div>
        这是numTwo的num：{{$store.getters.getNum}}
    </div>
</template>

<script>
    export default {
        name: "numTwo",
    }
</script>

3.mutations

* 更改Vuex 的store中的状态的唯一方法是提交mutation

但是它不能使用异步方法

目录：store/index.js

export default new Vuex.Store({
  // state 相当于组件中的data，专门存放全局数据
  state: {
    num:0
  },
  //getters相当于组件中的computed，getters是全局的，computed是组件内部的
  getters：{
  	 getNum(state){
      	return state.num
   	 }
  }
  // mutations 相当于组件中的methods，
  // 但是它不能使用异步方法（定时器,axios）
    mutations: {
        // 让num累加
        // payload 是一个形参，如果组件在commit时，有这个参数过来，
        // 就存在，如果没有传过来，就是undefind
        increase(state, payload) {
            state.num += payload ? payload : 1
        }
    },
  actions: {
  },
  modules: {
  }
})

目录：btn.vue

<template>
    <div>
        <button @click="addNum">点击按钮加1</button>
    </div>
</template>

<script>
    export default {
        name: "btn",
        methods:{
            addNum(){
                // 调用store中的mutations中的increase方法
                // 传参的话，使用payload
                this.$store.commit('increase',5)
            }
        }
    }
</script>

4.actions

actions是store 中专门用来处理异步的，实际修改状态值的，还是mutations

目录：store/index.js

export default new Vuex.Store({
    // state 相当于组件中的data，专门存放全局数据
    state: {
        num: 0
    },
    //getters相当于组件中的computed，getters是全局的，computed是组件内部的
    getters: {
        getNum(state) {
            return state.num
        }
    },
    // mutations 相当于组件中的methods，但是它不能使用异步方法（定时器,axios）
    mutations: {
        // 让num累加
        // payload 是一个形参，如果组件在commit时，有这个参数过来，
        // 就存在，如果没有传过来，就是undefind
        increase(state, payload) {
            state.num += payload ? payload : 1
        },
        decrease(state){
          state.num--
        }
    },
    //actions 专门用来处理异步 ， 实际修改状态值的，依然是mutations
    actions: {
    // 点击了 ‘减一’ 按钮后，放慢一秒后在执行方法
        decreaseAsync(context){
          context.commit('decrease')
        }
    },
    modules: {}
})

目录：btn.vue

<template>
    <div>
        <button @click="addMum">点击按钮加1</button>
        <button @click="delNum">点击按钮减1</button>
    </div>
</template>

<script>
    export default {
        name: "btn",
        methods:{
            addMum(){
                // 调用store中的mutations中的increase方法
                // 传参的话，使用payload
                this.$store.commit('increase',5)
            },
            delNum(){
                this.$store.dispatch('decreaseAsync')
            }
        }
    }
</script>

5.辅助函数

mapState 和 mapGetters 在组件都是写在 computed 里面

<template>
	<h2>Home页面的数字：{{num}}</h2>
	<h2>About页面的数字：{{getNum}}</h2>
</template>
<script>
    import {mapState, mapGetters} from 'vuex'
    export default {
        computed: {
            ...mapState(['num']),
            ...mapGetters(['getNum'])
        }
    }
</script>

mapMutations 和 mapActions在组件都是写在 methods 里面

<template>
    <div>
        <button @click="increase(2)">点击按钮加1</button>
        <button @click="decreaseAsync()">点击按钮延迟减1</button>
    </div>
</template>

<script>
    import { mapMutations, mapActions} from 'vuex'
    export default {
        methods: {
            ...mapMutations(["increase"]),
            ...mapActions(['decreaseAsync'])
        }
    }
</script>

6.拆分写法

store 中的所有属性，都可以拆分成单独的 js 文件来书写

例如：

	// state.js
	export default {
		num：0
	}

7.modules

我们的store可以认为是一个主模块，他先可以分解为很多子模块，子模块都可以单独领出来写，写完在导入到主模块中。先以 Users 子模块举例

users模块也可以拥有 state、getters。mutations 和 actions
所有的方法和属性，该怎么写就怎么写。
单 users 的 index.js 文件中，需要写入namespaced：true 命名空间
然后再store 的 index.js 中引入 modules中。

在组件中获取值的方法:

$store.state.users.nickName

在组件中触发mutaitons的方法：

methods:{
	...mapMutations({
		'changeNickName':'users/changeNickName'
	})
}

8.MUTATIONS_TYPE

将mutaitons中所有的方法，归纳起来
目录：mutations_type.js

export const MUTAITONS_TYPE = {
    INCREASE:'increase',
    DECREASE:"decrease"
}

export default {
    [MUTAITONS_TYPE.INCREASE](state, payload) {
        state.num += payload ? payload : 1
    },
    [MUTAITONS_TYPE.DECREASE](state){
        state.num--
    }
}

目录：store/index.js

	import mutations from "./mutations_type";
	
	export default new Vuex.Store({
    ...
    mutations,
  	...
})

组件中：

<template>
    <div>
        <button @click="increase()">Two的按钮 ，点击加一</button>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex'
    import {MUTAITONS_TYPE} from "../store/mutations_type";
    export default {
        methods:{
           //方法一：
            ...mapMutations([MUTAITONS_TYPE.INCREASE]),
            //方法二：
            increase(){
				this.$store.commit(MUTAITONS_TYPE.INCREASE)	
			}
        }
    }
</script>