Vuex入门级使用

一、入门示例

1、安装

npm install vuex --save

2、简单示例

1、src/vuex/store.js 写入代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//1.state ：创建初始化状态
const state ={
    count:1,
    parameterForm:null,
}
//2.mutations:创建改变状态的方法
const mutations ={
    //状态变更函数一般大写
    ADD(state,n){
        state.count +=n;
    },
    SetParameterForm(state,data){
        state.parameterForm =Object.assign(data,{});
    }
}
//3. getter: 提供外部获取state
const getters={
    count:function(state){
        return state.count;
    },
    getForm(state){
        return state.parameterForm;
    }
}
// actions:创建驱动方法改变mutations
const actions = {
    //触发mutations中相应的方法一般小写
    add({commit},data){
        commit('ADD',data);
    },
    setParameterForm({commit},data){
        commit('SetParameterForm',data);
    }
}
const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})
export default store;

2、main.js全局引入

import store from './vuex/store';
var vue = new Vue({
  el: '#app',
  store,
  render: h => h(App)
}).$mount('#app')
export default vue;

二、state对象的获取

1、在组件的template中直接使用

<h2>{{$store.state.count}}</h2>

2、computed中赋值

computed:{
	count(){
		return this.$store.state.count;
	}
}

3、通过mapState的对象来赋值

computed:mapState({
	//es5写法
	count:function(state){
		return state.count;
	},
    //es6 写法
    count:state =>state.count
})

4、通过mapState的数组来赋值

computed:mapState(['count'])

5、通过mapState的JSON来赋值

computed:mapState({
	count:'count'
})

ps:一般方法4和方法5比较常用

完整示例代码

<template>
</template>
<script>
import {mapState} from 'vuex'
export default {
    data(){
        return{
            msg:'',
        }
    },
    // //方式二
    // computed:{
    //     count(){
    //        return this.$store.state.count; 
    //     }
    // }
    // //方式三
    // computed:mapState({
    //     //es5写法
    //     conunt(){
    //         return state.count;
    //     }
    //     //es6 写法
    //     //count:state=>state.count
    //  })
    //方式4通过mapState的对象来赋值
    //computed:mapState(['count']),
    //方式5通过mapState的JSON来赋值
    computed:mapState({
        'count':count,
    }),
    
}
</script>
<style scoped>

</style>

三、mutations-getters-actions

1、mutations(修改状态)

(1) template直接使用$store.commit()触发

<button @click="$store.commit('ADD')">+</button>
//src/vuex/store.js
const mutations ={
	//状态变更函数
	ADD(state){
		state.count++;
	}
}

(2) 利用mapMutations引入触发

<template>
	<div class="hello">
        <h1>{{msg}}</h1>
        <button @click="ADD"></button>
    </div>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
    name:'vuex test',
    data(){
        return{
            msg:'vuex test'
        }
    },
    //method中加入mapMutations
    methods:mapMutations(['ADD']),
}
</script>

<style>

</style>

2、getters(获取state和过滤)

//src/vuex/store.js 增加代码
const getters={
	count：function(state){
		return state.count+100;
	}	
}

（1）常规获取值

computed:{
	//获取getters
	count(){
		return this.$store.getters.count;
	}
}

（2）mapGetters获取值

//1.引入mapGetters
import {mapGetters} from 'vuex'
//2.使用
computed:{
	...mapGetters(["count"])
}

3、actions（异步状态修改）

actions和mutations功能基本一样，不同点是，actions是异步的改变state状态，而mutations是同步改变状态。不过实际项目中一般是通过actions改变mutations中的值。

（1）store.js中增加异步代码

const actions ={
	//触发mutations 中相应的方法
	add({commit}){
		//增加异步
		setTimeout(()=>{
			commit('ADD')
		},3000)
	}
}

（2）常规使用

<button @click='add'></button>
method:{
	add(){
		//分发action
		this.$store.dispatch('add');
	}
}

​ (3) mapAction的使用

<button @click='add'></button>

import {mapActions} from 'vuex'
method:{
	...mapActions(['add'])
	//或者
    ...mapActions({
		add:'add'
	})
}

四、普通js文件中使用

import store from '../vuex/store'
store.dispatch('clearTab');