Vuex 的使用

Posted 2021-08-18 鲸渔要加油

文章目录

• vuex 是什么？
• • 一、 state 的渲染
  • 二、 mutations
  • 三、 actions
  • 四、 getters
  • 五、 模块化 modules
  • 模块化中的命名空间

vuex 是什么？

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

vuex 是采用 集中式 管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题

1. state 共享数据状态
2. mutations 所有数据的修改，但只能执行同步代码
3. actions 执行异步的代码，然后将数据提交给 mutations

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";

Vue.use(Vuex);
// store 就是 vuex 的实例
const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {},
});

new Vue({
  render: (h) => h(App),
  store,
}).$mount("#app");

一、 state 的渲染

1. 原始形式

<div> {{ $实例.state.数据名 }} </div>

2. 计算属性
将 state 属性定义在 computed 中

computed: {
	自定义属性名() {
		return this.$实例.state.属性名
	}
}

再使用

<div> {{ 自定义属性名 }} </div>

3. 辅助函数 mapState

第一步： 引入 mapState 并解构一个 mapState，然后在计算属性中采用数组形式引入 state 属性，并用延展运算符导入

import { mapState } from 'vuex'

export default {
	computed: {
		...mapState(['属性名'])
	}
}

第二步： 再使用

<div> {{ 属性名 }} </div>

二、 mutations

state 数据的修改只能通过 mutations ，并且必须是同步更新，目的是形成 数据快照

数据快照 ： 一次 mutations 的执行，立刻得到一种视图状态，因为是立刻所以必须同步

mutations 是一个对象，对象中存放修改 state 的方法

mutations: {
	// 这里传参的 state 就是当前的 vuex 中的 state 对象
	// payload 自定义名的形参
	// payload 载荷 提交 mutations 的方法时候传递的参数
	// 可以是任何形式 任何类型的值
	方法名(state, payload) {
		state.数据名 += payload
	}
}

1. 原始形式

绑定点击事件

<button @click="事件名"> 按键名 </button>

在 methods 调用

methods: {
	事件名(){
		// 调用 mutations 方法 提交 mutations
		// commit 是调用 mutations 里面方法的固定写法
		// payload 是传入的参数
		this.$实例.commit("方法名", 100)
	}
}

2. 辅助函数 mapMutations

先引入，再在 methods 中用延展运算符导入 方法

import { mapMutations } from 'vuex'

export default {
	methods: {
		...mapMutations(['方法名'])
	}
}

使用

这里 方法名 就是实例里面导入进来的
<button @click="方法名(1000)"> 按键名 </button>

三、 actions

state 是存放数据，mutations 是同步更新数据，actions 负责进行异步操作，必须通过 mutations 改数据

actions: {
	// 第一个参数是上下文对象 自定义名 context
	// context 相当于组件中的 this.$实例
	// 第二个是传参
	异步方法(context, params) {
		setTimeout(function() {
			context.commit("addCount", params);
		}, 1000);
	},
}

1. 原始形式

绑定点击事件

<button @click="事件名"> 按键名 </button>

在 methods 调用

methods: {
	事件名(){
		// dispatch 是调用 actions 里面方法的固定写法
		this.$实例.dispatch("方法名", 100)
	}
}

2. 辅助函数 mapActions

先引入，再在 methods 中用延展运算符导入 方法

import { mapActions } from 'vuex'

export default {
	methods: {
		...mapActions(['方法名'])
	}
}

使用

这里 方法名 就是实例里面导入进来的
<button @click="方法名(1000)"> 按键名 </button>

四、 getters

类似于 vue 中的计算属性

例如在 satte 中定义了一个 list 数组筛选大于 5 的数

state: {
	list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

定义 getters

getters: {
	// filterList 自定义的名字
	filterList：state => state.list.filter(item => item > 5)
}

然后渲染数据

原始形式

<div> {{ $实例.getters.filterList }} </div>

辅助函数

先引入，再在 计算属性 中用延展运算符导入 方法

import { mapGetters } from 'vuex'

export default {
	computed: {
		...mapGetters(['filterList'])
	}
}

<div> {{ filterList }} </div>

五、 模块化 modules

modules: {
	// 放置子模块的属性
	user: {
		state: {
			token: '12345'
		},
		mutations: {},
		actions: {},
		getters: {},
	},
	setting: {
		state: {
			name: '远近渔'
		},
		mutations: {},
		actions: {},
		getters: {},
	}
}

渲染

直接  子模块.属性
<div> {{ $实例.state.user.token }} </div>
<div> {{ $实例.state.setting.name }} </div>

另外一种方式用 根节点 的 getters 快捷方式一下

getters: {
	token: state => state.user.token
	name: state => state.setting.name
}

然后引入

import { mapGetters } from 'vuex'

export default {
	computed: {
		...mapGetters(['token', 'name'])
	}
}

<div> {{ token }} </div>
<div> {{ name }} </div>

模块化中的命名空间

子模块的内部的 mutations actions getters 是注册在 全局命名空间 的

可以直接全局调用

modules: {
	// 放置子模块的属性
	user: {
		state: {
			token: '12345'
		},
		mutations: {
			updataToken(state) {
				state.token = '67890'
			}
		}
	}
}

<button @click="quanju"> 全局调用 </button>

export default {
	methods: {
		quanju() {
			this.$实例.commit('updataToken')
		}
	}
}

如果想要让内部模块具有高封闭性，可以采用 namespaced 来设置

modules: {
	user: {
		// 这里设置 namespaced
		namespaced: true,
		state: {
			token: '12345'
		},
		mutations: {
			updataToken(state) {
				state.token = '67890'
			}
		}
	}
}

调用方法 1
采用路径形式
加子模块名

<button @click="quanju"> 全局调用 </button>

export default {
	methods: {
		quanju() {
			// 这里加子模块名
			this.$实例.commit('user/updataToken')
		}
	}
}

调用方法 2

<button @click="quanju"> 全局调用 </button>

import { mapMutations } from 'vuex'

export default {
	methods: {
		...mapMutations(['user/updataToken']),
		quanju() {
			// 中括号形式取到方法，小括号进行调用
			this['user/updataToken']()
		}
	}
}

调用方法 3
createNamespacedHelpers 创建基于某个命名空间的辅助函数

<button @click="updataToken"> user模块调用 </button>

import { createNamespacedHelpers } from 'vuex'
// 这个 mapMutations 是基于 user 模块的
// 调用方法2 的 mapMutations 是全局的
const { mapMutations } = createNamespacedHelpers('user')

export default {
	methods: {
		...mapMutations(['updataToken']),
	}
}