VUEX的使用方法

安装及基本配置

下载vuex

yarn add vuex  // 或 npm  i vuex

//引入
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)  //注册  给组件添加$store

// 创建实例化对象/创建创库   可抽离为单独的文件
const store = new Vuex.Store({
  state: { 
//储存共享的数据,只能通过mutations中的函数进行修改
   user:{
     name:'张三',
     age:18
   },
   num1:2,
   num1:10
},
  mutations: { 
//定义修改state中数据的函数
//定义的函数有2个形参数,第一个为state中所有数据组成的对象
//第2个值为调用mutations函数时传递的值,具体件下文调用mutations函数
    setName(state,value){
      state.user.name=value
    }
},
  actions: {
//vuex中异步代码的执行位置 
//如果要修改state值必须调用mutations中的函数
//可以在这里发送axios请求
    asyncSetName(store,value){
      setTimeout(()=>{ 
        store.commit('setName',value)  //具体调用mutations的方法下面介绍
      },2000)
    }
},
  getters: { 
//vuex中计算属性的书写位置
    sum(store){
       return store.num1 + store.num2
    }
},
  modules: { 
//创建多个模块时使用,无模块是可以删除
//下面介绍具体使用方法 
}

})

//在main.js中挂载
new Vue({
  store,  //必须和实例化对象的store名字相同
  render: h => h(App)
})

在其他文件中获取vuex中的数据

在后缀为.vue的文件中使用

第一种方法:直接使用

<template>
  <!-- 在HTML获取state及mutations,actions,getters不需要加this如下 -->
  <div>{{$store.state.user.name}}</div>
</template>

<script>
export default {
   methods: {
    setName () {
       //在script中获取state及mutations,actions,getters都需要加this
      console.log(this.$store.state.user.name) //获取state中的user对象中的name属性
       //下行代码 执行mutactions中的setName函数,对state中的user对象中的name修改为李四
      this.$store.commit('setName','李四') 
       //下行代码 执行actions中的sayncSetName函数,可以在actions中发送axios请求
      this.$store.dispatch('asyncSetName', '王五')
      //下行代码, 打印getters中的计算属性
      console.log(this.$store.getters.sum)
    }
  }
}
</script>

第2种方法:映射使用

<template>
  <!-- 在HTML获取state及mutations,actions,getters不需要加this如下 -->
  <div>{{$store.state.user.name}}</div>
</template>

<script>
//导入解构方法
import { mapState, mapMutations, mapActions,mapGetters } from 'vuex'
export default {
   computed: {
    ...mapState(['user'])  //state解构到计算属性
    ...mapGetters(['sum']) //getters解构到计算属性
   },
   methods: {
    ...mapMutations(['setName']),
    ...mapActions(['asyncSetName']),  //mutations和actions解构到methods
    setName () {
       //在script中获取state及mutations,actions,getters都需要加this
      console.log(user.name) //获取state中的user对象中的name属性
       //下行代码 执行mutactions中的setName函数,对state中的user对象中的name修改为李四
      this.setName('李四')
       //下行代码 执行actions中的sayncSetName函数,可以在actions中发送axios请求
      this.asyncSetName('王五')
      //下行代码, 打印getters中的计算属性
      console.log(this.$store.getters.sum)
    }
  }
}
</script>

在后缀为.js的文件中使用

import store from './store'  //引入store对象

//总的变更只是把this.$store换成了store
 console.log(store.state.user.name) //获取state中的user对象中的name属性
 //下行代码 执行mutactions中的setName函数,对state中的user对象中的name修改为李四
 store.commit('setName','李四') 
  //下行代码 执行actions中的sayncSetName函数,可以在actions中发送axios请求
  store.dispatch('setName', '王五')
  //下行代码, 打印getters中的计算属性
  console.log(store.getters.sum)

下面为整理好的具体的方法(开启命名空间即模块化)