几分钟带你认识vuex的五个核心属性

第一步：npm i vuex --save/-S
第二步：创建store.js
第三步：挂载使用 Vue.use(vuex)
第四步：const store = new Vuex.Store({...配置项})
第五步：导出 export default store
第六步：导入main.js 在根实例配置 store 选项指向 store 实例对象

具体如下:

安装

npm install vuex

//简写npm i vuex

创建store.js

// 初始化一个vuex的实例（数据仓库） 导出即可
import Vuex from 'vuex'
import Vue from 'vue'
 
// 使用安装
Vue.use(Vuex)
 
// 初始化
const store = new Vuex.Store({
  // 配置（state|mutations|actions）
})
 
export default store

把store对象挂载到Vue实例中

import store from '@/store'
new Vue({
  // 把store对象挂载到vue实例对象中，这样就可以在所有的组件中获取store中的数据了
  store,
  render: h => h(App),
}).$mount('#app')

六、详解五种状态

1.state:存放公共数据

状态state用于存储所有组件的数据。

state: {
		// 定义vuex中的数据
		cartNum: 10,
	},

总结：

state中的数据是自定义的，但是state属性名是固定的
获取数据可以通过 $store.state
可以使用计算属性优化模板中获取数据的方式
计算属性不可以使用箭头函数（箭头函数本身是没有this的，实际上用的是父级函数中的this）

2.getters:计算属性，对state里的变量进行过滤。

getters:从现有state数据计算出新的数据

先定义getters


//在组件中调用
$store.getters.fee
// 相当于state的计算属性（基于State处理成另外一份数据）
// getters的主要应用场景：模板中需要的数据和State中的数据不完全一样
// 需要基于state中的数据进行加工处理，形成一份新的的数据，给模板使用
getters: {
		// 从现有数据计算新的数据 每个商品佣金是0.5元
		// fee佣金会跟随cartNum变化而变化
		fee:function(state){
			return state.cartNum*0.5;
		}
	},

在调用时，使用$store.getters.方法名，如$store.getters.powerCounter即可

再使用getters

caleList () {
  // 注意：获取getters的值，不需要加括号（当属性使用）
  return this.$store.getters.getPartList
},

总结：

getters相当于在State和组件之间添加一个环节（对state中的数据进行加工处理后再提供给组件）
getters不要修改state中的数据
getters类似之前的计算属性（基于state中的数据进行计算）

3.mutations:唯一可以改变state数据的工具，相当于vue里的methods

mutations:定义修改数据的方法

目标：Vuex规定必须通过mutation修改数据，不可以直接通过store修改状态数据。

为什么要用mutation方式修改数据？Vuex的规定

为什么要有这样的规定？统一管理数据，便于监控数据变化

1.vuex的store状态的唯一更新方式：

提交mutations
mutations主要包括两部分：

字符串的事件类型
一个回调函数，该回调函数的第一个参数就是state

mutations: {
		// 修改state数据必须在mutations中的方法
		// 方法名建议大写
		SET_CART_NUM(state,data){
			// 修改cartNum的值
			state.cartNum = data;
		}
	},

2.在组件中访问mutations的方法

$store.commit('SET_CART_NUM',100)

<p>购物车数量:{{$store.state.cartNum}}</p>
<button @click="$store.commit('SET_CART_NUM',100)">修改为100</button>
<button @click="$store.commit('SET_CART_NUM',$store.state.cartNum+1)">修改+1</button><br>

总结：

先定义（mutations），再出发 this.$store.commit(‘mutation的名称，参数’)
mutation的本质就是方法，方法名称自定义，mutation函数内部负责处理的变更操作。
一种操作就是一个mutation，不同的mutation处理不同的场景。

4.actions:异步操作

actions：定义异步延迟的方法

通常情况下，Vuex要求我们的mutation中的方法必须是同步方法
如果使用异步操作，那么devtools将不能很好地追踪
如果确实有异步操作，要使用Action替代mutation完成

先安装axios的包

npm i axios
//导入包
import axios from 'axios'

再定义获取数据方法

actions: {

    // actions是固定的，用于定义异步,网络延迟等方法
	// 只能调用mutations,不能直接修改state
		getCartNum(context,data){
			// 可以执行网络请求,等待延迟
			setTimeout(()=>{
				// 等待4秒后执行mutations的 SET_CART_NUM方法
				context.commit("SET_CART_NUM",data);//修改了cartNum的值为1
			},4000)
		}
	
	},

mutation中的方法用commit回调
actions中的方法用dispatch回调
state里的状态只能在mutation中更改

总结：

原始方式：this.$store.dispatch(‘queryData’, num)
简化方式一：对象
简化方式二：数组

5.modules:模块化

modules: 模块化vuex，可以让每一个模块拥有自己的 state、mutation、action、 getters，使得结构非常清晰，方便管理。

注意：style上加scoped属性的原理
在 Vue 组件中，为了使样式模块化，不对全局造成污染，可以在style 标签上添加 scoped 属性以表示它的只属于当下的模块，局部有效。
结合实际:我们做的后管系统设置头像图片样式的时候,不加scoped属性就会影响全局样式

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)