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
引入 import {mapState} from 'vuex'
使用:
computed:{
...mapState(['数据','数据',...])
}
2. mapGetters
引入 import {mapGetters} from 'vuex'
使用:
computed:{
...mapGetters(['方法1','方法2',...])
}
3. mapMutations 和 mapActions
引入
使用
...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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。