vuex的五个核心属性
vuex由五部分组成(五种状态/五种属性)
VueX五个核心属性分别是 state、getter，mutations、actions、module
state: 定义vuex的数据地方
actions:定义异步延迟的方法
mutations: 唯一可以修改state数据的方法
getters:从现有state数据计算出新的数据， 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）
modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter
详解五种状态
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:异步操作
总结：
先定义（mutations），再出发 this.$store.commit(‘mutation的名称，参数’)
mutation的本质就是方法，方法名称自定义，mutation函数内部负责处理的变更操作。
一种操作就是一个mutation，不同的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属性就会影响全局样式
