其他分享
首页 > 其他分享> > vuex

vuex

作者：互联网

vuex(状态管理模式)

常用文件 store/index.js

export default new Vuex.Store({
	state:{},
	getters:{},
	mutations:{},
	actions:{},
	modules:{}
})

1. 获取(state)中的数据

1. 直接获取
{{$store.state.数据键名}}
2. 通过调用方法获取
computed:{
	fun(){
		return	this.$store.state.数据键名
	}
}

//在模块中调用
{{fun}}

2. 获取(getters)计算属性的值

1. 直接获取
{{$store.getters.方法名}}
2. 通过调用方法获取
computed:{
	fun(){
		return	this.$store.getters.方法名
	}
}

//在模块中调用
{{fun}}

3. 修改vuex中的数据

1. 同步方法修改(mutations属性)

vue文件中

//思路: 可以在自己组件中绑定方法,在方法中执行vuex中的同步修改方法
    <button @click="updClick()">同步-累加2</button>
	
	methods:{
        updClick(){
            // 调用vuex中的同步修改方法
            // 使用commit('自定义同步修改方法',载荷值)
            this.$store.commit('addNum',2)
        }
    }

index.js文件中

mutations:{
	//同步修改数据的函数,里面有两个参数
    参数1: 存储数据的对象state
    参数2: 载荷 payload(要变化的数值)
    
    addNum(state,payload){
        state.num(键)+=payload;
    }
}

//不能在同步种使用异步操作: 会出现页面被重新渲染但vuex中的数据没有更新的结果
2. 异步方法修改(actions属性)

vue文件中

//与同步同样思路,只是调用异步修改的方法不同
	methods:{
        updClick(){
            // 调用vuex中的异步修改方法
      		// 使用dispatch('异步修改方法',载荷值)
      		this.$store.dispatch('asyncNum', 2) 
        }
    }

index.js文件中

actions:{
	//需要在组件中调用异步修改方法,然后在异步修改方法中调用同步修改方法
    两个参数: 参数1=> 包含一些对象和方法的对象context
    		 参数2=> 载荷
    
   	asyncNum(context,payload){
        setTiemout(()=>{
            context.commit('addNum',payload);
        },2000)
    }
}

4. 辅助函数

1. mapState

  1. 引入 import {mapState} from 'vuex'

  2. 使用:

​ computed:{

​ ...mapState(['数据','数据',...])

​ }

2. mapGetters

  1. 引入 import {mapGetters} from 'vuex'

  2. 使用:

​ computed:{

​ ...mapGetters(['方法1','方法2',...])

​ }

3. mapMutations 和 mapActions

  1. 引入

  2. 使用

...mapMutations(['方法1','方法2',...])

...mapActions(['方法1','方法2',...])

//该函数使用后,需要给修改数据的函数下面传值 => this.方法名(载荷)

拆分模块: 就是当前实现的功能模块可以单独建立一个文件,里面创建index.js文件用来实现功能
//此时的辅助函数写法
...mapState({
    '键名':state=>state.add.键名
})

//剩余关于获取方法的写法一致
...mapxxx({
    '方法名':'模块文件名/方法名'
})

4. 模块的使用modules

1. 引入其他模块
	import 模块名 from '模块路径'

2. 使用
	modules:{
        模块名
    }

5. 细化vuex中的每个属性

state:{},
getters:{},
mutations:{},
actions:{},
modules:{}

可以在当前拆分的模块目录中根据不同属性创建相对应的文件
state.js
getters.js
mutations.js
actions.js

然后在每个文件中 开放数据
export default{
    //里面是每个属性中的内容
}


//index.js主文件
需要在主文件中引入每一个拆分的模块
import state from './state'
...
...


//命名空间: 在主文件index.js中还需要通过命名空间来分类,区分不同的代码功能,当namespaced的值为true,才能把当前目录作为模块去使用

namespaced:true

6. 统一管理方法名

可以创建一个js文件,将所有创建过的方法名都重新定义,统一保存
eg:
export const ADD_NUM1='addNum1';
export const ADD_NUM2='addNum2';

标签：...,vuex,js,state,模块,方法
来源： https://www.cnblogs.com/ashuang/p/16584628.html