vuex

使用vuex

vuex是一个vue的包,如果在创建项目的时候没有额外安装vuex包,就需要手动下载包,手动配置

1. 安装。 npm i vuex@3.6.2 , vue2安装3.的版本,vue3安装4.的版本
2. 配置
3. 1. 创建Vuex.store实例
   2. 向Vue实例注入store 3.使用。在组件中使用store

//配置代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state(){
    return {
      // 就是公共的数据，所有的组件都可以直接使用
      count: 100
    }
  }
})
export default store

state保存公共数据并在组件中使用

new Vuex.store({ 
  state() { //公共数据,所有的组件都可以使用,相当于是data()
    return {
       属性名： 属性值 
    }
  }
})

在组件中，通过this.$store.state.属性名来访问。
在模板中，则可以省略this而直接写成： {{$store.state.属性名}}
state的作用是：保存公共数据（多组件中共用的数据）

mutations修改公共数据

new Vue.store({  //可以修改数据
  mutations：{ //用它提供修改数据的方法
    // 每一项都是一个函数，可以声明两个形参
  	mutation名1：function(state [, 载荷]) {//载荷是用来接收App.vue传来的数据
      //state是公共数据 载荷是要修改的数据,将载荷赋值给state就可以修改公共数据了
    },  //数据不应该在组件内部直接修改，必须在组件内调用mutations来修改
    mutation名2：function(state [, 载荷]) {
      state.userInfo.logo = newUrl //载荷赋值给公共数据,state就相当于是this,使用state获得userInfo的数据
    }
	} //mutations相当于是methods用来修改state的数据
})

每一项都是一个函数，可以声明两个形参：

• 第一个参数是必须的，表示当前的state。在使用时不需要传入
• 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据

使用:this.$store.commit('mutation名', 实参)实参就是要传的数据,可以写文字,数字等

const url = 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
this.$store.commit('changeUrl', url)

在调用时：用 this.$store.commit('mutation名'， 载荷) 来调用

传递数据时参数只能有一个,如果要传递复杂的数据,则可以使用对象形式
this.$store.commit('setUrl', { url:值, host:值} ) 对象类型的传值,要遵循对象的格式

getters的派生状态

作用:可以用来在已有的数据A的基础上,计算得到新的数据B 当A变化时,B也能跟着变化,

与组件中computed计算属性一样

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

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

actions-发异步请求

作用：发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部
context.commit('amendc', res.data.data)//第一个参数名要和mutation名修改公共数据里的函数名一样,因为收到的ajax请求数据要修改到state里

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {  //载荷就是要传入的数据内容
        console.log(context)  //会打印new Vuex.store对象里面所有的数据
      // 1. 发异步请求, 请求数据
        axios.get('http://www.liulongbin.top:3009/api/getbooks').then(res => {
            context.commit('amendc', res.data.data)  //要器
        })
      // 2. commit调用mutation来修改数据
      // context.commit('mutation名', 载荷)
    }
  }
})

在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

用modules来拆分复杂业务

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
      state: {},
      getters: {},
      mutations: {},
      actions: {},
      modules: {
  	模块名1： {
    		// namespaced为true，则在使用mutations时，就必须要加上模块名,
      //如果不写则默认为false,则在使用mutations时,不需要加上模块名
      	namespaced: true, 
  	    state(){},
            getters() {},
            mutations() {},
            actions() {},
            modules: {}
  	}，
  }
})

访问数据和修改数据 访问模块中的数据，要加上模块名

获取state公共数据项： {{$store.state.模块名.数据项名}}
获取getters计算： {{$store.getters['模块名/getters名']}}

• 访问模块中的mutations/actions:
  • 如果namespaced为true，则需要额外去补充模块名
  • 如果namespaced为false，则不需要额外补充模块名

$store.commit('mutations名')        // namespaced修改公共数据为false
$store.commit('模块名/mutations名')  // namespaced为true

$store.dispatch('actions名')    //发异步请求    // namespaced为false
$store.dispatch('模块名/actions名')  // namespaced为true

map辅助函数

// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。
//  es6 按需导入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'

computed: { 
   // 说明1： ...对象 是把对象展开，合并到computed
   // 说明2： mapState是一个函数 
   //  ['数据项1'， '数据项2']
   ...mapState(['xxx'])，
   ...mapState({'新名字': 'xxx'})
}

使用步骤: this.xxx 或者 {{xxx}}

mapState辅助函数

computed: { 
  ...mapState('模块名', ['xxx']), 
  ...mapState('模块名', {'新名字': 'xxx'})
}
//如何使用modules中的state
computed: { 
  ...mapState('模块名', ['xxx']), 
  ...mapState('模块名', {'新名字': 'xxx'})
}

mapgetters辅助函数

// 直接使用：this.$store.getters.xxx
//map辅助函数
computed: { 
  ...mapGetters(['xxx']), 
  ...mapGetters({'新名字': 'xxx'})
}
//如何使用modules中的getters
computed: { 
  ...mapGetters('模块名', ['xxx']), 
  ...mapGetters('模块名',{'新名字': 'xxx'})
}

mutations辅助函数

// 直接使用：this.$store.commit('mutation名', 参数)
//辅助函数
methods: { 
  ...mapMutations(['mutation名']), 
  ...mapMutations({'新名字': 'mutation名'})
}
//如何使用modules中的mutations（namespaced:true）
直接使用： this.$store.commit('模块名/mutation名', 参数) 
//辅助函数
methods: { 
  ...mapMutations('模块名', ['xxx']), 
  ...mapMutations('模块名',{'新名字': 'xxx'})
}

actions辅助函数

//直接使用：this.$store.dispatch('action名', 参数) 
//辅助函数
methods: { 
  ...mapActions(['actions名']), 
  ...mapActions({'新名字': 'actions名'})
}
//如何使用modules中的actions（namespaced:true）
   直接使用： this.$store.dispatch('模块名/action名', 参数) 
methods: { 
  ...mapActions('模块名', ['xxx']), 
  ...mapActions('模块名',{'新名字': 'xxx'})
}