1. vuex
1.1. 基本介绍
概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读、写),也是一种组件间通信的方式,且适合任意组件间通信
使用场景:多个组件依赖与同一状态; 来自不同组件的行为需要变更同一状态
都通过store管理
1.2. 环境搭建
-
使用vuex:
npm i vuex
import Vuex from ‘vuex’ //也可以写在index里面,这样mian.js只需要引入store就可以了
Vue.use(Vuex) //不能写在main.js里,需写在store文件夹的index里面,同时引入Vue
-
创建store:
-
在src里面创建一个store文件夹,用于创建vuex
-
里面创建一个index.js文件:
const actions = {} //用于响应组件中的动作; 默认添加函数参数context
mutations //用于操作数据,里面函数名尽量用大写,默认添加函数参数state
state //用于存储数据
const store = new Vuex.Store({ actions:actions,… }) //创建store,并添加所有配置项
export default store //可以和上面的合成一句
-
-
使用store:
在main.js里面引入store,在new Vue里面添加store:store, 与el平级
1.3. api
- this.$store.dispatch(‘jia’,this.n)
- getters配置项:和computed类似,但其数据可以用于所有组件
- this.$store.commit(‘JIA’,this.n)
2. 函数
借助这些函数生成代码块(批量生成函数),记得引入
2.1. mapState
-
import {mapState} from ‘vuex’
-
...mapState({he:'sum', xuexiao:'school'})
//写在computed中,会自动去store的state中找对应的属性值,mapState会返回一个对象,…表示将他们每一项展开,里面包含的是生成的函数代码:he(){ return this.$store.state.sum }
-
简写方式(数组形式):
...mapState(['sum','school'])
//适用于属性名和属性值相同
2.2. mapGetters
和mapState一样,只不过是从getters中读取数据
2.3. mapMutations
借助其可以生成对应的方法,方法中会调用commit去联系mutations
...mapMutations({increment:'JIA',decrement:'JIAN'})
//代替了自己写commit函数,但是调用函数increment和decrement得传参,代替原本的this.n
一样有数组写法
2.4. mapActions
和mapMutations一样,代替的是dispatch
3. vuex模块化
3.1. 创建结构
-
const countOptions = {actions:{},mutations,state,getters} //将其分别写成一个个对象(模块)
-
在Store中用modules包裹
export default new Vuex.Store({ modules:{ a:countOptions, b:personOptions }})
3.2. 使用
-
使用的时候也是通过a,b去使用
…mapState([‘a’,‘b’]) a.sum, a.school
简写方式:…mapState(‘a’,[‘sum’,‘school’]) //需在countOptions里面添加一个
namespaced:true
其他几个也是类似的操作,在前面加一个模块名
-
不调用函数自己写:
this.$store.state.a.sum //在state后面加一个a以表示分类
this.$store.commit(‘a/ADD_PERSON’,value) //调用commit方法是需加一个/用于确定模块
this.$store.getters[‘a/firstPersonName’]
3.3. 文件形式
可以直接把一个模块写成一个文件,a.js
然后在index.js文件里面引入并使用