VueX学习笔记01

一、理解VueX

vuex:专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件之间通信的方式。且适用于任意组件间通信。
github地址：https://vuex.vuejs.org/zh/
什么时候使用VueX
- 多个组件依赖于同一个状态
- 来自不同组件的行为需要变更同一状态
vuex的结构内容

二、VueX的使用

搭建vuex环境
- 安装vuex, vue2需要安装 3版本的vuex 而vue3需要安装 4版本的vuex。默认安装最新版本
  1
  npm install vuex@3

创建文件 src/store/index.js

//该文件用于创建vuex中最核心的store
import Vue from 'vue'
import Vuex from 'vuex'

//应用·vuex插件
Vue.use(Vuex)
    //准备acitions
const actions = {}

//准备mutations——用于操作数据
const mutations = {}

//准备state——用于存储数据（state ）
const state = {}

//创建并导出store
export default new Vuex.Store({
    actions, ///触发简写actions:actions
    mutations,
    state
})

在main.js 中创建vm时传入store配置项

......
 import store from './store'  //一般文件夹下的index.js会默认引用
 ......
 //创建vm
 new Vue({
     el:"#app",
     store,
     render: h=>h(App),
 })

Vuex的实际使用

组件中读取vuex的数据$store.state.sum state为一个对象
组件中修改vuex中的数据：$store.dispath('action中的方法名',数据)或者$store.commit('mutations中的方法名',数据)
action中可以进行逻辑处理（相当于餐厅服务员，可以同时存在多个），mutations中的函数进行数据处理，相当于餐厅的厨师。

实际代码：

//该文件用于创建vuex中最核心的store
import Vue from 'vue'
import Vuex from 'vuex'
//应用·vuex插件
Vue.use(Vuex)
    //准备acitions
const actions = {
    //context是上下文，具有dispatch，commuit,state等
    addnum(context, value) {
        context.commit('AddNum', value)
    },
    jiannum(context, value) {
        context.commit('JianNum', value)
    },
    addodd(context, value) {
        if (state.sum % 2) {
            context.commit('AddNum', value)
        }
    },
    addwait(context, value) {
        setTimeout(() => {
            context.commit('AddNum', value)
        }, 1000)
    }
}

//准备mutations——用于操作数据
const mutations = {
    AddNum(state, value) {
        state.sum += value
    },
    JianNum(state, value) {
        state.sum -= value
    }
}
//准备state——用于存储数据（state ）
const state = {
    sum: 0 //当前和为0
}
//创建并导出store
export default new Vuex.Store({
    actions, ///触发简写actions:actions
    mutations,
    state
})

注： 若没有网络请求或者其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

getters的使用
- 概念：当state中的数据需要经过加工后再使用时，可以只用getters加工
- 在store.js中追加getters配置
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  ......
  const getters = {
  bigSum(state) {
  return state.sum * 10
  }
  }
  //创建并导出store
  export default new Vuex.Store({
  ......
  getters
  })
- 组件中读取数据： $sotre.getters.bigSum (类似于computed属性)

四个map方法的使用（mapState,mapGetters,mapActions,mapMutations）

mapState方法：用于帮助我们映射state中的数据为计算属性

//借助mapState生成计算属性，从state中读取数据（对象写法）
 ...mapState({sum1:'sum',name1:'name',school1:'school'}), // computed属性视作对象，mapState返回也是对象，一个对象插入另一个对象中使用...

 //借助mapState生成计算属性，从state中读取数据（数组写法）
 ...mapState(['sum','name','school']),

napGetters方法： 用于帮助我们映射getters中的数据为计算属性

 //借助mapGetters生成计算属性，从getters中读取数据（数组写法）
  ...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性，从getters中读取数据（数组写法）
  ...mapGetters(['bigSum'])

mapActions方法： 用于帮助我们生成actions对话的方法，即：包含$store.dispatch(xxx)的函数。调用方法时需要传递参数，否则参数为默认的事件对象

//借助mapActions生成对应的方法，方法中调用dispatch去联系actions（对象写法）
...mapActions({incrementOdd:'addodd', incrementWait:'addwait'}),

 //借助mapActions生成对应的方法，方法中调用dispatch去联系actions（数组写法）
...mapActions(['addodd', 'addwait']), //事件对应的方法写成数组中的名字

mapMutations方法： 用于帮助我们生成mutations对话方法，即：包含$store.commit(xxx)的函数。

//借助mapMutations生成对应的方法，方法中调用commit去联系mutations（对象写法）
 ...mapMutations({increment:'AddNum',decrement:'JianNum'}),

//借助mapMutations生成对应的方法，方法中调用commit去联系mutations（数组写法）
 ...mapMutations(['AddNum','JianNum'])

注意:mapActions与mapMutations使用时，若需要传递参数：则需要在模板绑定事件时传递参数，否则参数为默认的事件对象
三、多组件共享数据,模板化+命名空间

目的：让代码更好维护,让多种数据分类更加明确

修改store/index.js

const countAbout={
    namespaced:true,  //开启命名空间
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...},
}

const personAbout={
    namespaced:true,  //开启命名空间
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...},          
}
const store=new Vuex.Store({
    modules:{
        countAbout:"",
        personAbout
    }
})

开启命名空间后，组件中读取state数据

//方法一：自己直接读取
  this.$store.state.personAbout.list
//方法二：借助mapStaste读取
   ...mapState('personAbout',['sum','school','age'])

开启命名空间后，组件中读取getter数据：

//方法一：自己直接读取
  this.$store.getters['personAbout/firstPersonNum']
//方法二：借助mapGetters读取
  ...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch：

//方法一：自己直接调用dispatch
  this.$store.dispatch('personAbout/addPersonWang',person)  //person为传过去的数据
//方法二：借助mapActions
  ...mapActions('countAbout',{increment:'addnum',decrement:'jiannum'})

开启命名空间后，组件中调用commit：

//方法一：自己直接调用commit
  this.$store.commit('personAbout/AddNum',person)  //person为传过去的数据
//方法二：借助mapMutations
  ...mapMutations('countAbout',{increment:'AddNum',decrement:'JianNum'})

VueX学习笔记01

一、理解VueX

二、VueX的使用

三、多组件共享数据,模板化+命名空间