vuex六种方法使用及场景

• Vuex 是什么？
  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

• vuex的六种方法

state的使用方法及场景

方法	作用
state	存放公共数据

• state的使用场景及方法

• 第一种方法：在元素中使用

	<p>{{$store.state.name}}</p>

• 第二种：在声明周期或者事件方法中使用

	this.$store.state.name

• 简化版

	<p>{{name}}</p>
	<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
	        ...mapState([
	            'name',
	        ]),
	    },
	</script>

mutations 的使用方法及场景

方法	作用
mutations	vuex改变vuex的唯一途径，事件方法

• 需要先在vuex的methods中传递事件，然后在vuex中接收事件使用，这种触发函数并携带参数的方法叫做载荷。
• 传递方法给vuex

	// 将事件传递到vuex中
	this.$store.commit('changeTel', 110)

• vuex接收事件
• mutations接收的事件有一个固定形参state，他代表state方法，第二个参数是传递过来的数据

	// 接收vue传递的事件
	mutations: {
        changeTel(state, val) {
            console.log(val)
        },
    },

• 简化版

	<script>
	import { mapMutations } from 'vuex'
	export default {
		methods:{
	        ...mapMutations([
	            'changeTel',
	        ]),
	        exitUser() {
            	this.changeTel({tel: 110, age: 18})
        	},
	    }
	</script>

actions 的使用方法及场景

方法	作用
actions	异步操作，异步方法处理数据

• vuex中使用actions的方法

	actions: {
        changeAsync() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    var list = [{
                        name: "商品一",
                        price: 100
                    },
                    {
                        name: "商品二",
                        price: 1200
                    }]
                    resolve(list)
                }, 1000);
            })
        }
    },

• vue中使用异步操作的方法

	created() {
        this.$store.dispatch('changeAsync', '123').then(res => {
           this.changeShopList(res)
        })
    },

• 简化版

	<script>
	import { mapActions } from 'vuex'
	export default {
	    created() {
	        this.changeAsync().then(res => {
	             this.changeShopList(res)
	        })
	    },
		methods:{
	        ...mapActions([
	            'changeAsync',
	        ]),
	    },
	</script>

getters 的使用方法及场景

方法	作用
getters	计算属性，相当于vue中的computed属性 只不过 getters是用于vuex的计算属性

• vuex中使用getters的方法

	getters: {
        // getter方法会接收一个参数state其实就是 store中的state方法
        changeAge(state) {
            state.name++
            return state.name
        }
    },

• vue使用方法

	<p>{{changeDate1}}</p>
	<script>
	import { mapGetters } from 'vuex'
	export default {
	    computed: {
	        ...mapGetters([
	            'changeDate1'
	        ])
	    },
	</script>

modules 的使用方法及场景

方法	作用
modules	导入其他模块的数据的方法

• 其他模块相当于一个另一个vuex，可以将庞大的数据，分类封装成单独模块，然后引入到一个模块，提高代码的维护性
• 封装模块的例子

•   	const moduleA = {
    	    state: {
    	        data: 'moduleA',
    	        data1: true
    	    },
    	    getters: {
    	        changeDate1() {
    	            return '你是个麻瓜'
    	        }
    	    },
    	    mutations: {},
    	    actions: {}
    	}
    	export default moduleA
  

- 将封装好的模块引入
```javascript
	modules: {
        moduleA
    },

• vue中使用，使用方法和不引入的使用方法一致

	<p>{{changeDate1}}</p>
	<p>{{moduleA.data}}</p>
	<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
	        ...mapState([
	            'moduleA'
	        ]),
	        ...mapGetters([
	            'changeDate1'
	        ])
	    },
	</script>

plugin 的使用方法及场景

方法	作用
plugin	插件管理

• 安装插件前电脑上需要有yarn或者npm或cnpm
• 安装插件

	// 第一种安装方式
	yarn add vuex-persistedstate --save
	// 第二种安装方式
	npm i vuex-persistedstate --save
	cnpm i vuex-persistedstate --save

• 在vuex中引入插件

	import createPersisted from 'vuex-persistedstate'

• 使用插件

	plugins: [
           createPersisted()
    ]

注：vuex-persistedstate此插件是vuex的数据持久化，可以设置其存储个别数据，具体使用方法到npm官网查看https://www.npmjs.com/，进去直接搜索vuex-persistedstate查看