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函数用法汇总