Vuex的学习笔记

Vuex 是什么

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

状态管理包含三个部分

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。
  

安装

npm install vuex --save
yarn add vuex

举个例子

• 首先创建一个store(状态仓库)

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: { // 状态
    count: 0
  },
  mutations: { // 更改状态
    increment (state) {
      state.count++  
    }
  }
})
new Vue({
	store, // 为了能在vue的this.$store中获取到对应的方法和数据
	render: h => h(App),
}).$mount('#app')

state

• 顾名思义 state就是状态
• 如上个例子 在根组件中注册store,那么其所有子组件都可以通过this.$store访问到;

使用state的方式

直接在需要的地方使用,

以count为例

<template>
  <div id="app">
    <div>{{$store.state.testState}}</div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

在计算属性中使用

export default {
    name:"App",
    computed:{
    	count(){
   		return this.$store.state.count;
   	}
    }
}

mapState辅助函数

顾名思义, 这就是用来映射state的

import { mapState  } from "vuex"
export default{
	// ...
	// 第一种写法
	compuped:mapState({
		// 箭头函数
		count:state=>state.count,
		// 字符串, 'count' 等同于state=>state.count
		count1:'count' 
  	}),
  	// 第二种写法
  	compoted:mapState(['count','state2',...]),
  	// 第三种写法, 将局部的计算属性包含在一起
  	computed:{
  		// 本地的计算属性
  		localComputed(){......},
  		// 映射属性
  		...mapState(["count","state1","state2",...])
  	}
}

getters

• 如果获取的状态数据在多个地方都需要处理, 比如过滤,排序等等, 那么我们可能是复制, 可能是单独抽离出来一个方法, 但是这些解决办法都不是那么理想,vue的getters解决了这个问题
• getters相当于Vue的computed的计算属性, 在依赖发生该变的时候才重新计算;
• getter允许state作为第一参数

const store = new Vuex.Store({
    state:{
        testState:0,
        theme:"black",
        isBack:false
    },
    getters:{
        // 意思就是testState不能小于10
        checkTestState:state => {
            if(state.testState<10)return 10;
            return state.testState;
        }
    },
})

getters的访问可以通过store.getters来访问

    <div>checkTestState: {{$store.getters.checkTestState}}</div>

mapGetter的使用方式和mapState类似

mutations

mutation都是同步事件

• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
• 不做过多解释 看代码

mutations:{
// mutation接受state作为第一个参数, 同时支持额外参数(payload荷载)
    changeTestState:function (state,payload){
        if (payload === null)return;
        state.testState = payload;
    }
},

更改state的唯一方式是commit

methods:{
	buttonClick(){
	   this.$store.commit('changeTestState',this.val);
	 }
},

mapMutations 使用方法和之前的类似,不过应当放在methods中

actions

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

与mutation的不同

• 提交的都是mutation而不是直接更改state
• 可以随便异步

actions: {
 increment (context) {
 	setTimeout(() => {
      context.commit('increment')
    }, 1000)
  }
}

触发action

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

actions 同样支持荷载(payload)

mapActions的使用方式和mapMutations类似

Module — 一般大项目才使用

• 简单来说就是因为项目复杂, 所以状态数臃肿, 所以将多个store分解出来, 最后再组合在一起
• 便于维护
• 官方文档地址