vuex如何使用

1.Vuex-在Vue项目使用Vuex

 

第一种情况:

当你在 旧的项目组使用vuex, 要先在终端下载vuex这个包,然后在配置
​
第一步:在终端 输入:yarn add vuex 或 npm i vuex 下载vuex。
​
第二步:创建Vuex.store实例 向Vue实例注入store 。

第二种情况:

在新项目中使用, 在配置脚手架,创建项目时,就可以直接选中vuex项,这样就不用做任何配置了(脚手架会自动帮我们完成的)

Vuex的内容有哪些?

vuex中有5个要学习,分别是: state, mutations, getters, actions, modules,

其中必须要学会state, mutations。

1.state: 统一定义公共数据:

(类似于data(){return {a:1, b:2,xxxxxx}}),与router一样,当我们在项目中使用vuex之后,为了方便代码维护,我们一般需要做特殊的目录调整

1.在 store/index.js 中放置具体的代码:

import Vue from 'vue'
import Vuex from 'vuex'  //引入vuex
​
Vue.use(Vuex)
​
const store = new Vuex.Store({
  state: {
      
  }
})
export default store //导出vuex

2.向vue实例注入store,在src/main.js中 导入sotre 并注入实例

// 省略其他
// 1. 导入store
import store from './store' 
​
new Vue({
  // 省略其他...
  store // 2. 注入Vue实例
})

在任意(组件中)使用store 是通过:this.$store.state 来获取公共数据。

Vuex-state定义公共数据并在组件中使用

state的作用:vuex用它来保存公共数据(多个组件中公共的数据),而且它是响应式的,如果修改了数据,视图上野会跟着改变。

在组件中,通过this.$store.state.属性名来访问。

在模板中,则可以省略this而直接写成: {{$store.state.属性名}}

2.mutations :Vuex-用mutations修改公共数据

可以通过调用mutations来修改定义在state中的公共数据

分两个格式: 注册的格式,调用的格式

mutations的中文含义是:变异。 它是Vuex中用来修改公共数据的唯一入口。

在定义时:

  • 它的第一个参数是state,第二个参数是 形参2

在调用时:

  • 用 this.$store.commit('mutation名', 实参(修改的内容)) 来调用

定义格式:
在store/index/js中
export default new Vuex.Store({
  // 严格模式
  strict: true,
  state: { //保存的公共数据
    name: 'zs',
    age: 18,
    skills: ['抖音', 'B站', '美团'],
    address: '黑马',
    login: '图片地址'
  },
  mutations: {
       // 每一项都是一个函数,可以声明两个形参
    setlogin: function (state, login_img) {
      state.login = login_img
    }
    mutation名1:function(state, 形参名 ) {
  
    },
  },
 ---------------------------------------
在src/App.js组件中
   使用格式:
     methods: {
    //目标:当点击按钮 修改原图片
    commitimg() {
      this.$store.commit("mutations中定义的名字","实参")
    },
  },
      参数2只能有一个,但是如果传递复杂数据,第二个参数可以是对象
      this.$store.commit('mutations中定义的名字', { 数据1, 数据2} )

3.getters: 类似于computed(计算属性,对现有的状态进行计算得到新的数据-------派生 )

在state中的数据的基础上,进一步对数据进行加工得到新数据。(与组件中computed一样)

有两种格式:

定义格式:

new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
  }
})

使用格式:在组件中通过:$store.getters.getter的名字 来访问

vuex维护公共数据,主要有两个动作:

  1. 定义数据:

  2. 提供获取/修改数据的方法

4.actions: 发起异步请求

  • action中可以通过调用 mutation来修改state,而不是直接变更状态。

  • action 可以包含任意异步(例如ajax请求)操作。

  • 定义格式:

  • new Vuex.store({
      // 省略其他...
      actions: {
        // context对象会自动传入,它与store实例具有相同的方法和属性
        action的名字: function(context, 形参2) {
          // 1. 发异步请求, 请求数据
          
          // 2. commit调用mutation来修改/保存数据
          
          // context.commit('mutation名', 实参2)
        }
      }
    })
  • 调用格式:在组件中直接使用 this.$store.dispatch('actions的名字', 参数)`来调用action

  • 写一个示例:

  • // 发ajax请求,从后端获取数据,再来去修改state中的数据
        actions: {
          getBooks (context, params) {
            console.log('getbooks的查询参数是', params)
            axios({
              url: '地址',
              method: 'GET'
            }).then(res => {
              console.log(res)
              context.commit('setBooks', res.data.data)
            })
          }
        },
  • 将ajax请求放在actions中有两个好处:

    1. 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。

    2. 逻辑更通顺。如果数据需要保存在Vuex的state中,那从接口处获取数据的操作就定义在Vuex的actions中。

5.modules: 模块拆分

拆分模板,把复杂的场景按模块来拆开

格式:

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    模块名1: {
            // namespaced为true,则在使用mutations时,就必须要加上模块名
        namespaced: true, 
          state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
    },
    模块名2: {
        // namespaced不写,默认为false,则在使用mutations时,不需要加模块名
          state: {},
            getters: {},
            mutations: {},
            actions: {},
         modules: {}
    }  
  }
})
也可以更进一步对文件进行拆分。
|--store /
|------- index.js # 引入模块
|------- modules
|-------------- / mod1.js # 模块1
|-------------- / mod2.js # 模块2

访问模块中的数据,要加上模块名

如果namespaced为true,则需要额外去补充模块名
$store.commit('模块名/mutations名')  // namespaced为true
 在使用modules时,建议都给加上namespaced!

vuex-用mo dules之后代码结构优化

Vuex-map函数用法汇总

如何使用全局state

  • 直接使用: this.$store.state.xxx

map辅助函数:

computed: { 
  ...mapState(['xxx']), 
  ...mapState({'新名字': 'xxx'})
}

如何使用modules中的state

直接使用: this.$store.state.模块名.xxx;

map辅助函数:

  • computed: { 
      ...mapState('模块名', ['xxx']), 
      ...mapState('模块名', {'新名字': 'xxx'})
    }

如何使用全局getters

  • 直接使用:this.$store.getters.xxx

  • map辅助函数:

    computed: { 
      ...mapGetters(['xxx']), 
      ...mapGetters({'新名字': 'xxx'})
    }

如何使用modules中的getters

  • 直接使用: this.$store.getters.模块名.xxx

  • map辅助函数:

    computed: { 
      ...mapGetters('模块名', ['xxx']), 
      ...mapGetters('模块名',{'新名字': 'xxx'})
    }

如何使用全局mutations

  • 直接使用:this.$store.commit('mutation名', 参数)

  • map辅助函数:

    methods: { 
      ...mapMutations(['mutation名']), 
      ...mapMutations({'新名字': 'mutation名'})
    }

如何使用modules中的mutations(namespaced:true)

  • 直接使用: this.$store.commit('模块名/mutation名', 参数)

  • map辅助函数:

    methods: { 
      ...mapMutations('模块名', ['xxx']), 
      ...mapMutations('模块名',{'新名字': 'xxx'})
    }

如何使用全局actions

  • 直接使用:this.$store.dispatch('action名', 参数)

  • map辅助函数:

    methods: { 
      ...mapActions(['mutation名']), 
      ...mapActions({'新名字': 'mutation名'})
    }

如何使用modules中的actions(namespaced:true)

  • 直接使用: this.$store.dispatch('模块名/action名', 参数)

  • map辅助函数:

    methods: { 
      ...mapActions('模块名', ['xxx']), 
      ...mapActions('模块名',{'新名字': 'xxx'})
    }

actions和mutations和state的关系图

Vuex-map函数用法汇总

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值