前言:
写在前面的话
为了我们更好的能够了解,什么是vuex怎么快速上手所以我们应该先明白我们要从他的那些方面入手如下
- 1、什么是vuex?
- 2、vuex能够帮助我们解决什么问题?
- 3、如何使用vuex?
- 4、vuex的五大核心?
1、什么是vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理器。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。他使数据流通更加方便快捷,避免了很多冗余的业务逻辑,不用在组件中重复的去定义。一般在开发中大型项目的时候会用到vuex,小型项目开发用起来会有些麻烦。
2、vuex能够帮助我们解决什么问题?
vuex能够帮助我们解决组件之间数据传递或者共享的问题
3、vuex的理解
Vue 应用中的每个组件在 data() 中封装着自己数据属性,而这些 data 属性都是私有的,完全隔离的。如果我们希望多个组件都能读取到同一状态数据属性,或者不同组件的行为需要更新同一状态数据属性,
这就需要一个将共享的状态数据属性进行集中式的管理。
这就是 Vuex 状态管理所要解决的问题。
4、如何使用vuex?
4.1安装vuex
cnpm install vuex -save
4.2在src目录下创建store文件夹
4.3store文件夹内创建index.js
4.4index.js文件夹内引入vue与vuex
import Vue from "vue"
import Vuex from "vuex"
4.5注册vuex
Vue.use(vuex);
4.6对vuex进行实例化
const store = new Vuex({
核心配置
})
4.7导出vuex
export default store
4.8导出在main.js文件中引入store文件夹内的index.js文件
import store from "./store"
4.9将store配置到vue实例中
new Vue({
router,
store,
render: h => h(App)
})
index.js中的总体效果
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
main.js中的总体效果
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
5、Vuex的核心
vuex有五个核心概念:
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex
5.1state的作用
state:保存初始化的一些状态(数据)
在组件中如何获取state的状态:
全局:
$store.state.定义的属性
局部:
this.$store.state.定义的属性
5.2mutations的作用
mutations:定义改变state状态的方法
在组件中如何调用mutations内定义的方法:
全局: $store.commit("方法名")
局部: this.$store.commit("方法名")
5.3actions的作用
actions:在actions 中在通过context方法提交到mutation中,触发在mutations里面定义的方法。在action中可以进行一系列的异步操作,比如所axios请求等。
异步操作: 当一个程序没有执行完成,并不影响下面程序的执行,这个时候我们把它称之为异步操作( 定时器、promise、 async await)
同步操作: 当一个程序没有执行完成的时候,下面的程序不能执行,当上面的程序执行结束,下面的程序才可以执行 (for循环、函数、可通过promise对象进行异步操作)
在组件中如何调用actions内定义的方法:
全局:
$store.dispatch("方法名",载荷)
// 这里的载荷其实指的是要传递的参数
局部:
this.$store.dispatch("方法名",载荷)
5.3getters的作用
getters: 相当于是vuex的计算属性,他的返回值会被缓存起来,当依赖的值发生变化的时候会被重新计算。
在组件中如何调用getters内定义的方法:
getters中返回的值在组件中尽量使用computed方法接收一下,不然有可能会出现修改不会同步的情况。
5.4modules的作用
modules: 就是模块的意思,它将store分割成诸多个模块,每个模块都有完整的vuex的属性。它是为了避免在开发过程中业务逻辑
全部在同一个store中定义,出现一个巨型store,违背了vuex的初衷。 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。
每个模块拥有自己的 state、mutation、action、getter 等
例:
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
modules命名空间的处理:
如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如:
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
// 模块内容(module assets)
state: () => ({ ... }), // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
actions: {
login () { ... } // -> dispatch('account/login')
},
mutations: {
login () { ... } // -> commit('account/login')
},
// 嵌套模块
modules: {
// 继承父模块的命名空间
myPage: {
state: () => ({ ... }),
getters: {
profile () { ... } // -> getters['account/profile']
}
},
// 进一步嵌套命名空间
posts: {
namespaced: true,
state: () => ({ ... }),
getters: {
popular () { ... } // -> getters['account/posts/popular']
}
}
}
}
}
})
5.5plugins的作用
plugins:一个数组,包含应用在 store 上的插件方法。这些插件直接接收 store 作为唯一参数,可以监听 mutation(用于外部地数据持久化、记录或调试)或者提交 mutation (用于内部数据,例如 websocket 或 某些观察者)
6、Vuex的辅助函数
通过辅助函数mapState、mapActions、mapMutations,把vuex.store中的属性映射到vue实例身上,这样在vue实例中就能访问vuex.store中的属性了,对于操作vuex.store就很方便了。
6.1如何使用辅助函数
例如:
引入需要使用的辅助函数
import {mapMutations} from 'vuex'
export default {
methods:{
//扩展
...mapMutations('子模块名字',{"属性":"方法名"}),
Add(){
this.属性名('更改的字段')
}
}
}
end
总结:写了那么多大家还有可能比较迷糊不知道怎么写,来吧、展示上案例.
Test.vue这是一个展示组件
Test
<template>
<div>
<div>{{$store.state.n}}</div>
<button @click="Add">111</button>
</div>
</template>
<script>
export default {
methods:{
Add(){
this.$store.commit('Add',10) //保留
}
}
}
</script>
<style scoped>
</style>
index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
n:20
},
mutations: {
Add(state,value){
state.n+=value
}
},
actions: {
},
modules: {
}
})
通过点击按钮数字会增加数字,然后这个案例就到此结束啦,我们下一章再见呦~