vuex的学习总结

vuex的学习总结

简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

原理图

安装和使用

1. 安装vuex

npm install vuex --save

2. 使用

• 在项目根目录下的src文件夹中新建store文件夹，同时新建index.js文件，编写index.js文件如下

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({})
export default store;

• 在src文件夹中的main.js文件中进行修改如下（引入store下的index.js文件，并且将store绑定到全局）

import animate from 'animate.css'
import Vue from 'vue'
import App from './App.vue'
import store from "./store/index"
Vue.config.productionTip = false
Vue.prototype.bus = new Vue();
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
Vue.use(animate);

state

state：提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储。

1. 定义state

...
const store = new Vuex.Store({
    state:{
        count:0
    }
})
...

2. 使用state

• 组件中访问state中数据的第一种方式

this.$store.state.全局数据名称
eg:<h3>{{this.$store.state.count}}</h3>

• 组件中访问state中数据的第二种方式

// 1.从vuex中按需导入mapState函数： 
    import {mapState} from "vuex";
// 2.通过导入的mapState函数，将当前组件需要的全局数据映射为当前组件的computed计算属性
	computed：{
		...mapState(['全局数据名称'])
	}
	eg:computed：{
		...mapState(['count'])
	}
	<h3>{{count}}</h3>

mutation

mutation：用于变更store中的数据。

vue中只能通过mutation变更store数据，不可以直接操作store中的数据。

通过mutation这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

1. 定义mutation

...
const store = new Vuex.Store({
	mutations:{
	    add(state){
	        state.count++;
	    }
	}
})
...

2. 使用mutation

• 触发mutations的第一种方式

methods:{
    handles(){
        this.$store.commit("add");
    }
}

• 触发mutations的第一种方式（包含mutation的参数传递）

...
const store = new Vuex.Store({
	mutations:{
	    addN(state,step){
	        state.count+=step;
	    }
	}
})
...
methods:{
    handle2(){
        this.$store.commit("addN",3);
    }
}

• 触发mutations的第二种方式
  从vux中按需导入mapMutation函数：import {mapMutations} from “vuex”。
  通过导入的mapMutations函数，将需要的mutations函数映射到当前组件的methods方法。

...
const store = new Vuex.Store({
	mutations:{
	    sub(state){
	        state.count--;
	    }
	}
})
...
methods:{
    ...mapMutations(['sub']),
    handle2(){
        this.sub();
    }
}

• 触发mutations的第二种方式（包含mutation的参数传递）

...
const store = new Vuex.Store({
	mutations:{
	    subN(state, step) {
	        state.count -= step;
	    }
	}
})
...	
methods:{
    ...mapMutations(['subN']),
    handle2(){
        this.subN(3);
    }
}

action

action：用于处理异步任务，如果通过异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方式间接变更数据。

1. 定义action

...
const store = new Vuex.Store({
	actions：{
	    addAsync(context){
	        setTimeout(()=>{
	            context.commit("add");
	        },1000)
	    }
	}
})
...

2. 触发actions

• 触发actions的第一种方式

methods:{
    handle(){
        // dispatch就是触发action中的对应的方法
        this.$store.dispatch("addAsync");
    }
}

• 触发actions的第一种方式（包含actions的参数传递）
  从vux中按需导入mapActions函数：import {mapActions} from “vuex”。
  通过导入的mapActions函数，将需要的actions函数映射到当前组件的methods方法。

//定义
...
const store = new Vuex.Store({
	mutations:{
	    addN(state,step){
	        state.count+=step;
	    }
	},
	actions：{
	    addNAsync(context, step){
	        setTimeout(()=>{
	            context.commit("addN", step);
	        },1000)
	    }
	}
})
...
//调用
methods:{
    handle(){
        this.$store.dispatch("addNAsync",5);
    }
}

• 触发actions的第二种方式

methods:{
    ...mapActions(['addAsync']),
    handle(){
       this.addAsync();
    }
}

• 触发actions的第二种方式（包含actions的参数传递）

methods:{
    ...mapActions(["addNAsync"]),
    handle(){
       this.addNAsync(3);
    }
}

Getter

Getter：用于对store中的数据进行加工处理形成新的数据（getter不会修改store中的源数据，只起到一种包装数据的作用，即将store中的数据变一种形式返回出来）。

Getter可以对store中已有的数据加工处理之后形成新的数据，类似vue的计算属性。

store中的数据发生变化，Getter的数据也会跟着变化。

1. 定义getter

...
const store = new Vuex.Store({
	getters:{
	    showNum:state=>{
	        return "当前最新的数量是【"+state.count+"】"
	    }
	}
})
...

2. 使用getter

• 使用getter的第一种方式

this.$store.getters.名称
eg：<h3>{{$store.getters.showNum}}</h3>

• 使用getter的第二种方式
  从vux中按需导入mapGetters函数：import {mapGetters} from “vuex”。

<h3>{{showNum}}</h3>
computed:{
    ...mapGetters(['showNum'])
}

参考地址

1. 视频教学
2. 官网学习