vuex是什么
vuex是一个状态管理工具,在使用vue写代码的时候能帮助我们更好的管理数据
vuex
- 当我们需要对数据进行更好的统一的管理的时候
- 就需要用到vuex
- 安装vuex指令:npm i vuex -S
- 创建一个store文件夹,在下面创建一个index.js文件
- 引入vue和vuex
- store用来统一管理数据
- 在组件中我们可以使用$store.state.username访问到下面仓库中声明定义的username属性
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
//插件使用
Vue.use(Vuex);
// 创建vue项目管理状态的仓库
const store = new Vuex.Store({
// 提供仓库管理的状态
state: {
username: 'zhangsan'
}
});
//导出仓库
export default store;
vue中的mutation
- 在vue中,不推荐在仓库外部对state直接进行修改
- 推荐使用提交mutation从而修改state
- 使用下面两种方法进行修改数据修改
- 当我们在组件中直接修改state中数据,也是可以修改的,但是这样会让数据变得变得不可控,我们需要阻止启动生产消息,当我们在组件中修改state中数据中报出警告提示
- 我们把mutation作为修改state的唯一方式
//在main.js中输入这一行语句后,如果组件中直接修改state,vue可以给我报出警告提示
Vue.config.productionTip = false
//使用mutation修改state方法
//方法一:使用一个数组
this.$store.commit('modifyUsername', 'lisi')
//方法二:使用一个对象
this.$store.commit({
// type不能省略
type: 'modifyUsername',
value: 'lisi'
})
vue中的action
- 对仓库数据进行修改前,有异步操作,就使用actions
- 我们组件中调起action操作,在action中执行异步操作,然后调起mutation,依旧使用mutation修改state
- 示例
//在组件中调起action
// 调用actions
// 调用action方法一,使用一个数组
// this.$store.dispatch('modifyUsernameAction', 'lisi');
// 调用action方法二,使用一个对象
this.$store.dispatch({
type: 'modifyUsernameAction',
value: 'lisi'
})
//在仓库中使用action调用mutation
actions: {
// 方法名字是自定义的
modifyUsernameAction(context, payload){
console.log('modifyUsernameAction执行了。。。。。');
setTimeout(() => {
context.commit({
type: 'modifyUsername',
value: payload.value
});
}, 2000);
}
}
//mutation被调用修改state
mutations: {
// 方法名字自定义
modifyUsername(state, payload){
console.log('modifyUsername调用了。。。。');
state.username = payload.value;
}
}
过滤器
- 过滤器可以将数据在dom中的展示变成我们需要的样子,而不改变变量本身的内容
- 因此我们可以方便的计算和展示
全局过滤器
- 我们在main.js中声明全局过滤器
- 声明一个名为upppercase的过滤器,将字母转化为大写
//这是在main.js中声明的一个全局过滤器
Vue.filter("uppercase", (value, ...rest) => {
console.log("uppercase过滤器执行了。。。。");
console.log(rest);
return value.toUpperCase();
});
- 当我们使用时,使用如下方式
//这样子message代表的字符串就会以uppercase返回后的数据方式展示在dom元素上,而message不被改变
{{ message | uppercase }}
局部过滤器
- 局部过滤器我们在组件的script中创建
export default {
// 局部过滤器
filters: {
currency(value, num) {
return "$" + (value / 6.6999).toFixed(num);
},
},
data(){
return{}
}
}
vuex中的计算属性getters
- 类似组件中的计算属性,
- 在组件中我们用
this.$store.getters.recommendCount
来访问 - 示例:
const store = new Vuex.Store({
state: {
banner: [],
list: []
},
// 计算属性
// 返回 list的长度和奇偶
getters: {
recommendCount(state, getters){
return state.list.length;
},
type(state, getters){
return getters.recommendCount % 2 === 1 ? 'odd' : 'even';
}
},
})
vuex中的mapState
- mapState可以将全局state中的属性转化成组件的计算属性
computed: {
// 内部的计算属性
ab() {
return this.a + this.b;
},
//.......其他内部计算属性都可以在这写
// 全局的属性转为组件的计算属性
...mapState({
bannerData: (state) => state.banner,
listData: (state) => state.list,
count: (state) => state.list.length,
})
},
vuex中的mapGetters
- mapGetters可以将全局中的计算计算属性(getters)中的属性转化为组件的计算属性
computed: {
// 内部的计算属性
ab() {
return this.a + this.b;
},
//.......其他内部计算属性都可以在这写
// 全局的属性转为组件的计算属性
...mapState({
bannerData: (state) => state.banner,
listData: (state) => state.list,
count: (state) => state.list.length,
}),
// 全局的计算属性转为组件的计算属性
// 方式1:
// ...mapGetters(['recommendCount', 'type']),
// 方式2:
...mapGetters({
count: 'recommendCount',
type: 'type',
}),
}
vuex的mapMutations和mapActions
- mapMutations可以将全局中的matation为组件的methods
- mapActions可以将全局中的actions转化为组件的methods
methods: {
//组件内部的方法。。。
// 转换全局的mutations为组件的methods
// ...mapMutations([]),
// ...mapMutations({}),
// 转换全局的actions为组件的methods
// 方式1:
// ...mapActions(['requestBannerData', 'requestRecommendList']),
// 方式2:
...mapActions({
requestBanner: 'requestBannerData',
requestRecommend: 'requestRecomm,endList',
}),
},
vuex中的模块化(modules)
- 当我们在store中的index.js中写所有的数据管理时,数据非常多,管理不方便,所以我们使用模块化管理数据
- 创建新的文件分别管理不同组件的数据,如下示例1
- 可以给模块化设置命名空间,如下示例1
- 在index.js中导入组件数据管理的文件,如下示例2
- 在组件中调用时需要加上路径名称,如下示例3
- 当有模块化时候,我们需要使用到mapState,mapGetters,mapMutations,mapActions时候,需要加上模块名称,如下示例4
//示例1
//在管理组件数据的文件夹导出一个对象,
export default {
// 设置命名空间
namespaced: true,
state: {
banner: [1, 2, 3, 4]
},
getters: {
len(state, getters, rootState, rootGetters){
console.log(state, getters, rootState, rootGetters);
return state.banner.length;
}
},
mutations: {
add(state, payload){
console.log('home add.....');
state.banner.push(payload);
}
},
actions: {
addAction(context, payload){
console.log('home add action.....');
context.commit('add');
}
}
}
//示例2
import Vue from "vue";
import Vuex from "vuex";
//导入模块
import user from './modules/user'
import home from './modules/home'
Vue.use(Vuex);
// 创建vue项目管理状态的仓库
const store = new Vuex.Store({
// 仓库外部不能对state进行修改,只能在仓库内部修改
strict: true,
state: {},
mutations: {},
actions: {},
// 设置了仓库的模块
modules: {
//给user模块重新命名为了u
u: user,
home
}
});
//示例3
export default {
methods: {
btnAction(){
// 调用模块的state
console.log(this.$store.state.home.banner);
// 调用getters
console.log(this.$store.getters['home/len']);
// 调用muataions
this.$store.commit('home/add', 'a');
// 调用actions
this.$store.dispatch('home/addAction', 'a');
}
}
}
//示例4
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
computed: {
...mapState({
name: state=>state.user.name
}),
...mapGetters({
age: 'user/age'
})
},
methods: {
...mapMutations({
modifyName: 'user/modifyName'
}),
...mapActions({
modifyNameAction: 'user/modifyNameAction'
})
},