使用Vuex的好处
-
能够在vuex中集中管理共享的数据,易于开发和后期维护
-
能够高效的实现组件之间的数据共享,提高开发效率
-
存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
什么样的数据存储在Vuex中
组件之间的共享数据
基本使用
1、安装vuex的依赖包
npm install vuex --save
2、导入vuex包
src/store/index.js
import Vue from 'vue
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({})
注册vuex
main.js
import store from '@/store'
new Vue({
...
store
}).$mount('#app')
组件访问state中数据的方式
方式一:
this.$store.state.属性名称
方式二
//1、从vuex中按需导入mapState函数
import {mapState} from 'vuex'
//2、将全局数据映射为当前组件的计算属性
computed:{
...mapState(['属性名'])
}
//可以直接在页面中像计算属性一样使用
Mutation 修改store中的共有数据
mutation中不可以写异步的代码
触发mutation的第一种方法
//定义Mutation
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
//变更状态
state.count++
}
}
})
在组件中触发mutation
methods:{
handle(){
//触发mutation的第一种方式
this.$store.commit('add')
}
}
nutation传递参数
第一个参数永远是自身的state,第二个参数可以传递新的值,或要修改的纬度
mutations:{
add(state,step){
//变更状态
state.count+=step
}
}
methods:{
handle(){
//触发mutation的第一种方式
this.$store.commit('add',3)
}
}
触发mutation的第二种方法
//1、从vuex按需引入mapMutations函数
import {mapMutations} from 'vuex'
//2、将制定的mutations函数,映射为当前组件的methods函数
methods:{
...mapMutations(['add']),
//点击方法
btnclick(){
this.add(3);
}
}
Action
触发action函数的第一种方式
用于执行异步的操做变更数据,不能使用mutation,但是在Action中还是要通过触发mutation的方式间接变更数据
只有mutation中定义的函数才有权利修改state中的数据
//定义Mutation
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
//变更状态
state.count++
}
},
actions:{
//context相当于new出来的store对象
addAsync(context){
setTimeout(()=>{
context.commit('add')
},1000)
}
}
})
触发action函数:dispatch
handle(){
this.$store.dispatch('addAsync')
}
触发action时携带参数
mutations和actions中的方法都需要有一个形参,调用的时候将参数传递过来
mutations:{
add(state,step){
//变更状态
state.count+=step
}
},
actions:{
addAsync(context,step){
setTimeout(()=>{
context.commit('add',step)
},1000)
}
}
handle(){
this.$store.dispatch('addAsync',3)
}
触发action函数的第二种方式
//1、从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'
//2、将制定的actions函数,映射为当前组件的methods函数
methods:{
...mapActions(['addAsync'])
}
Getter
getter用于对store中的数据进行加工处理形成新的数据
对store中已有的数据加工处理形成新的数据, 不会改变原数据,只是对返回的数据做一层包装
store中的数据发生变化后,getter的数据也会跟着变化
定义getters
const store = new Vuex.Store({
state:{
count:0
},
getters:{
showNum(state){
return '当前最新的数量是'+state.count
}
}
})
获取与使用
-
第一种方式
this.$store.getters.showNum
-
第二种使用方式
import {mapGetters} from 'vuex' computed:{ ...mapGetters(['showNum']) }
持久化存储
vuex是为了管理项目中组件的状态,现在我理解为状态是交互的数据
没有持久化的vuex 中的数据在js脚本加载的时候创建,存储在 内存 中,释放内存时就会消失(
我理解的释放内存:刷新会释放内存,但是会重新加载;关闭浏览器:释放内存,不会重新加载数据)
数据持久化保存可以使用的机制有:
使用localstorage保存 存储数据没有时间限制,以 文件 形式存储在本地(永久存储) 不推荐
使用sessionStorage保存 用户关闭浏览器窗口后,数据会被删除(临时存储) 推荐
四个map方法
- **mapState方法:**用于帮助我们映射
state
中的数据为计算属性
computed: {
//借助mapState生成计算属性:sum、school、subject(对象写法)
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性:sum、school、subject(数组写法)
...mapState(['sum','school','subject']),
},
- **mapGetters方法:**用于帮助我们映射
getters
中的数据为计算属性
computed: {
//借助mapGetters生成计算属性:bigSum(对象写法)
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性:bigSum(数组写法)
...mapGetters(['bigSum'])
},
- **mapActions方法:**用于帮助我们生成与
actions
对话的方法,即:包含$store.dispatch(xxx)
的函数
methods:{
//靠mapActions生成:incrementOdd、incrementWait(对象形式)
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成:incrementOdd、incrementWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
}
- **mapMutations方法:**用于帮助我们生成与
mutations
对话的方法,即:包含$store.commit(xxx)
的函数
调用increment
时传递参数
methods:{
//靠mapActions生成:increment、decrement(对象形式)
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//靠mapMutations生成:JIA、JIAN(对象形式)
...mapMutations(['JIA','JIAN']),
}
备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
模块化+命名空间
-
目的:让代码更好维护,让多种数据分类更加明确。
-
修改
store.js
const countAbout = {
namespaced:true,//开启命名空间
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {
bigSum(state){
return state.sum * 10
}
}
}
const personAbout = {
namespaced:true,//开启命名空间
state:{ ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
countAbout,
personAbout
}
})
- 开启命名空间后,组件中读取state数据:
//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取:
...mapState('countAbout',['sum','school','subject']),
- 开启命名空间后,组件中读取getters数据:
//方式一:自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取:
...mapGetters('countAbout',['bigSum'])
- 开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions:
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
- 开启命名空间后,组件中调用commit
//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations:
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),