Vuex 的使用

Posted 2022-11-28 鲸渔要加油

文章目录

• 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']),