第四章：Vuex

目录

一、使用场景（共享）

 二、版本限制

 三、搭建Vuex开发环境

1.在src目录下新建store文件夹,里面新建index.js:

2.在main.js文件中使用：

五、分别实现加、减、是奇数且等等再加的案例（基本使用）

1. src/store/index的逻辑代码

五、配置项gitters

1.概念：当state中的数据需要进行加工后使用时，可以使用getter加工 src/store/index.js

2.使用：App.vue

六、mapSatate方法和mapGetters方法写在computed里面

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

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

七、mapActions方法和mapMutations方法

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

1.mapActions方法：用于帮助我们生成与actions对话的方法，即包含$store.dispatch(xxx)函数：

八、Vuex的模块化+namespace（技能提示）

1.src/store/count.js:

2.src/store.person.js:

3.src/store/index.js:

4.src/componets/Counter.vue:(使用map实现)

5.src/components/Person.vue:(不适用map方法实现)

6.src/App.vue：

7.效果图：

---

一、使用场景（共享）

多个组件依赖同一个状态

来自不同组件的行为需要变更同一状态

 二、版本限制

vue2中,要用vuex的3版本

vue3中,要用vuex的4版本

npm i vuex@3

 三、搭建Vuex开发环境

1.在src目录下新建store文件夹,里面新建index.js:

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex)

// 准备actions--用于响应组件中的动作
const actions = {}
// 准备mutations--用于操作数据（state）
const mutations = {}
// 准备state--用于存储数据
const state = {}

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

2.在main.js文件中使用：

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

new Vue({
  render: h => h(App),
  store,
  beforeCreate () {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

五、分别实现加、减、是奇数且等等再加的案例（基本使用）

1. src/store/index的逻辑代码

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex)

// 准备actions--用于响应组件中的动作，可以发送请求在actions里面
const actions = {
  increment (context, value) { //context里面就是一个小型的store,value就是传过来的值
    // console.log('actions里面的increment被调用了', value, context)
    context.commit("INCREMENT", value)  //向mutations提交数据 大写是传统默认的
  },
  decrement (context, value) {
    context.commit("DECREMENT", value)
  },
  waitIncrement (context, value) {
    if (context.state.sum % 2) {
      setTimeout(() => { context.commit('INCREMENT', value) }, 2000)
    }
  }
}
// 准备mutations--用于操作数据（state）
const mutations = {
  INCREMENT (state, value) { //state为状态，value为传过来的值
    // console.log('mutations里面的INCREMENT被调用了', state, value)
    state.sum += value * 1
  },
  DECREMENT (state, value) {
    state.sum -= value
  }
}
// 准备state--用于存储数据
const state = {
  // 当前的和
  sum: 0
}

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

2.App.vue的实现代码

五、配置项gitters

1.概念：当state中的数据需要进行加工后使用时，可以使用getter加工 src/store/index.js

// 准备getter--用于加工state
const getters = {
  bigSum (state) {  //state就是状态
    return state.sum * 10
  }
}

// 准备state--用于存储数据
const state = {
  // 当前的和
  sum: 0
}

//创建并导出store
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters  //配置getters
})

2.使用：App.vue

    
放大十倍的数值是：{{ $store.getters.bigSum }}

六、mapSatate方法和mapGetters方法写在computed里面

帮助我们解决每一次都要写{{ $store.state.sum }}或{{ $store.getters.bigSum }}

import {mapSatate,mapGetters} from 'vuex'    引入才能用

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

现在的数值是：{{ sum }}
  
computed: {
    // 借助mapState生成计算属性,sum(对象写法)
    // ...mapState({ sum: "sum" })

    // 借助mapState生成计算属性,sum（数组写法）
    ...mapState(['sum'])
  },

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

 computed: {
    // 借助mapGetters生成计算属性,bigSum(对象写法)
    // ...mapGetters({ bigSum: "bigSum" }),

    // 借助mapGetters生成计算属性,sum（数组写法）
    ...mapGetters(['bigSum'])
  },

七、mapActions方法和mapMutations方法

import {mapActions,mapMutations} from 'vuex'    引入才能用

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

对象写法时的@click
点我加一
点我减一
数组写法时的@click
点我加一
点我减一
methods: {
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
    // add为@click触发的方法哦,"INCREMENT"为store里面的mutations里面的方法
    ...mapMutations({ add: 'INCREMENT', jian: "DECREMENT" })

    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
    // 注意@click事件与mutation里面的方法一样时可以用
    ...mapMutations(['INCREMENT',"DECREMENT"])
}

1.mapActions方法：用于帮助我们生成与actions对话的方法，即包含$store.dispatch(xxx)函数：

// 对象时的写法
是奇数且等等加一
// 数组时的写法
是奇数且等等加一
    
// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
// waiteAdd是@click方法名，waitIncrement是store里面的actions里面的方法名
...mapActions({ waiteAdd: "waitIncrement" }),

// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组写法）
// 注意@click事件与store里面的action里面的方法名字一样时可以用
...mapActions(["waitIncrement"])

八、Vuex的模块化+namespace（技能提示）

这个我们分两个部分一个使用map的方法（count.js）一个使用store自己写的方法(person.js)

1.src/store/count.js:

export default {
  namespaced: true,
  actions: {
    waitIncrement (context, value) {
      if (context.state.sum % 2) {
        setTimeout(() => { context.commit('INCREMENT', value) }, 2000)
      }
    }
  },
  mutations: {
    INCREMENT (state, value) {
      state.sum += value * 1
    },
    DECREMENT (state, value) {
      state.sum -= value
    }
  },
  getters: {
    bigSum (state) {
      return state.sum * 10
    }
  },
  state: { sum: 0 }
}

2.src/store.person.js:

import axios from 'axios'
export default {
  namespaced: true,
  actions: {
    add (context) {
      axios({
        url: "https://api.uixsj.cn/hitokoto/get?type=social",
        method: 'GET',
      }).then(
        response => {
          context.commit("addPersonList", { id: 1, name: response.data })
        }
      )
    }
  },
  mutations: {
    addPersonList (state, value) {
      state.personList = [value, ...state.personList]
    }
  },
  getters: {
    name (state) {
      return state.personList.length == 0 ? "还未添加用户" : state.personList[0].name
    }
  },
  state: {
    personList: [
    ]
  }
}

3.src/store/index.js:

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

import countAbout from './count'
import personAbout from './person'

// 使用Vuex插件
Vue.use(Vuex)

//创建并导出store
export default new Vuex.Store({
  modules: {
    // countAbout:countAbout, //可以这样写也可以简写
    countAbout,
    personAbout
  }
})

4.src/componets/Counter.vue:(使用map实现)

5.src/components/Person.vue:(不适用map方法实现)

6.src/App.vue：

7.效果图：