Vuex五个核心概念使用

Vuex中五个核心概念

1. state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
2. mutations ： 使用它来修改数据(类似于methods)
3. getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生  )
4. actions： 发起异步请求
5. modules： 模块拆分

使用Vuex

1. 情况1：在老项目中使用。 先额外安装vuex包，然后在配置。
2. 情况2：在新项目中使用。 在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的）。

state

统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）。

定义

    state(){
         return {
             数据1：值1
         }
    }

使用

直接在组件中调用this.$store.state.数据1

mutations

使用它来修改数据(类似于methods)，Mutation 必须是同步函数。

定义

mutations: {
      m名字（state，参数）{
            执行内容
      }
}

使用

直接在组件中调用this.$store.commit("m名字"，实参)

getters

类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生  )。

定义

getters：{
    g的名字（state）{
        return 计算结果 
    }
}

使用

直接在组件中调用this.$store.getters.g名字

actions

发起异步请求。

定义

   actions：{
      //context里面有store的方法和属性
     a名字（context，参数）{
          axios......
          //调用函数修改state的数据
          context.commit("m的名字")
     }
   }

使用

直接在组件中调用this.$store.dispatch("a名字"，实参)

modules

模块拆分。

定义

在index.js中引入模块，并添加到modules

 import 模块1 from'./modules/模块1.js'

 modules: {
     模块1     
 }

模块1模板

export default {
    // namespaced不写，默认为false，则在使用mutations时,不需要加模块名，
    namespaced: true，    
    state,    
    mutations,    
    getters,     
    actions
}

调用模块中state,mutations,getters,actions

• state:   
  • this.$store.state.模块1.数据名字
• getters:   
  • this.$store.getters["模块1/g名字"]
• mutations:   
  • this.$store.commit("模块1/m名字, 参数）
• actions:   
  • this.$store.dispatch('模块1/a名字", 参数）