Vuex (vue2.0) 基础(理解)
相关词汇认识
1. devtools 工具
2. backbend API后台数据接口文档
3. actions 动作作用
4. dispatch 处理
5. mutation 突变
6. state 状态
7. store 仓库
核心概念vuex
Vuex的应用核心就是store,仓库中包含着应用大部分的状态。
官方文档中说明vuex的特点有两个:(相比全局变量而言)1.vue组件可以访问store中的state值并且state的改变也可以影响到组件的中某些变量或者是方法执行状态。2.vue组件不能直接的改变store中的状态,改变的方式是显式提交。
注:1.显示提交?? 2. 不能直接的改变store中的状态??
目前理解:
1.mutations,可以理解为vuex store 的mutations中定义的方法
就像代码中所示(这个完全可以对比newvue来理解,state(data)定义变量和mutations(method)方法)
2.不能直接改变的意思是:state 申明的变量不能通过直接获取的形式进行改变例如:store.state.count++,而是要通过定义方法,调用方法,来改变定义的状态值。例如调用下面的increment 方法,代码:store.commit('increment')。
/ 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)
Vuex 简单实例 计数实例
const store =new Vuex.Store({
state:{
count:0
},
mutations:{
increment (state){
state.count++
}
}
})
Vuex (vue2.0) 基础二(理解)
state 单一状态树
VUE使用单一的状态树,用一个对象包含了全部的应用层级的状态,并且作为应用唯一的数据源存在。每一个vue都有并且只有一个store(状态库)也就是单一的状态树。单一的状态树可以让我们直接定位任意特定状态片段。(单一状态树和模块化并不冲突)
在 Vue 组件中获得 Vuex 状态
1. 如何在组建中展示状态
在vue组件中的计算属性中返回需要返回的状态值。如下列子:
// 创建一个 Counter 组件
const Counter ={
template:`<div>{{ count }}</div>`,
computed:{
count (){
return store.state.count
}
}
}
每当store.state.count变化的时候,vue组件都会重新计算属性,并且触发更新关联的DOM
然而这种模式,有些弊端,就是不同组件使用state的时候,在组件中要频繁的导入,这个的确好麻烦!!(能不能类似见一个公共的库,在最起始的位置引入之后,在里面后需补充所需要的状态变量,这样的话也相当于控制所有的状态! 感觉66哒)
2. Vuex通过store选项,提供了一种机制(什么机制看代码),将状态从根组件注册到每一个组件中。
Vue.use(Vuex) //
调用
vuex
const app =new Vue({
el:'#app',
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
store,
components:{ Counter },
template:`
<divclass="app">
<counter></counter>
</div>
`
mapState 辅助函数
一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState
辅助函数帮助我们生成计算属性,让你少按几次键:
Ps:什么是语法糖:
需要声明的是“语法糖”这个词绝非贬义词,它可以给我们带来方便,是一种便捷的写法,编译器会帮我们做转换;而且可以提高开发编码的效率,在性能上也不会带来损失。没有按照常规语言格式,可以被编译的简写代码。