Vuex基础使用大全

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不被改变
<template>
<h1>{{ message | uppercase }}</h1>
</template>

局部过滤器

• 局部过滤器我们在组件的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'
    })
  },