什么是Vuex?
Vuex是集中式管理状态的模式(多个组件共同读写同一个数据)
什么时候使用组件?
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
Vuex 工作原理图
Vuex有三个重要的组成部分 分别是Actions、mustaions、state 。
1. Actions 用来处理异步操作。比方说 backend API (请求数据) ,也就是说异步操作放在Actions里面进行处理
2. Mutations 是同步操作,也是用来更改state状态的地方。 在这里需要说一句, 更改state状态的操作,统一放在mutations里面。 原因有三 ①mutations是同步操作更适合更改state状态 ② 官网要求的 ③ 在严格模式下不在mutations里面更改状态会报错
3. state 是用来存放数据的地方。 state英文翻译就是状态也就是数据。
在vuex中有两个比较重要的方法。
1.dispatch: 用于使用Actions里面的方法
2.commit 用于使用mutations里面的方法 当然在我们的vuex工作原理图中还有一个mutate,这个其实就相当于去更改state数据,在mutations中操作。无法直接使用这个方法。
也就是相当于只有mutations才能使用mutate,也就是只有在mutations中才能更改state状态。
Map技术的使用
Map英文翻译地图、映射的意思,Map的作用就是 我们在组件中调用vuex中的方法或者获取vuex中的state时,进行简化获取的代码。
比方说正常情况下获取state数据,需要 this.$store.state.属性名。 而使用map后可以只需要写属属性名就可以了
Map是vuex中的API
在组件中只需要引入即可 ,一共有四个可以使用的Map 分别是mapState、mapGetter、mapActions、mapMutations。 都是驼峰命名法
以state为例
import {mapState} from 'vuex'
因为state里面存放的都是数据,我们只需要获取获取数据的路径就可以了
因此我们在计算属性中使用map
mapState(['sum']) 返回出来的值就是 this.$store.state.sum 就是自动帮我们拼接。mapState里面也可以接受对象。 就相当于把vuex中的数据获取过来直接在重新命名,在组件中使用
如果你使用vuex模块化,在vuex中有可能会有命名冲突的问题,而你就可以使用对象结构将获取的数据重新命名
mapState({重新命名Name:'state中的属性名'})
剩下三个Map的使用比较类似,其中的mapActions和mapmutations 有些许差异 因为Actions和mutations里面是方法,用于逻辑处理的,大家可以翻看官方文档
Vuex环境的搭建
① 下载Vuex包 npm install Vuex -d 放在生产环境下
② 创建一个js文件可以命名为store 引入vue、vuex , 在main.js 也就是vue入口文件中使用中间件引入vuex
vue.use(vuex)
然后将创建的js文中 导入到vue入口文件中,添加至vue实例中.
vue入口文件
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
store,
}).$mount('#app');
相当于注册在vue中了, 在vue component 中就可以找到vuex了。
vue 实例与vue组件的关系,就相当于vue是原型 vue组件相当于是根据原型创建的一个实例。
在vue中注册vuex,就相当于 vue组件也有了这个方法。
vuex中要讲的部分虽然不是很多,但如果都用文字描述出来的话,工作量还是比较大的。 所以我向使用多个章节讲里面的知识点分别讲述
一共有以下几个知识点会在后面的章节叙说
① vuex环境的搭建
② mapState、mapGetter 的使用
③ mapActions、mapMutations的使用
④vuex模块化以及map如何调用模块中的状态
⑤getter配置项以及plugin插件的使用。