Vuex

$store 对象中存放的东西是固定的，主要有：state、mutations、actions、getters、modules

store里面的state、mutations、actions其实都是一个对象

1.state：单一状态树即单一数据源，在一个项目中只使用一个store对象，来存储所有共享的状态信息。存放需要共享的状态信息，使用时通过 $store.state.参数名 即可拿到状态信息。

2.actions：如果确实需要进行一些异步操作，比如网络请求，建议在 Actions 中进行处理，这样 devtools 就能够进行跟踪，由 Actions 处理异步操作，具体的函数部分仍交由 Mutations 进行处理。组件中使用时，调用：this.$store.dispatch('方法名','参数')

3.Mutations： 组件中使用时，调用this.$store.commit

这里执行一个动作，比如要加一个数 这个加就是一个动作 把这个动作通过调用dispatch传给actions，然后通过actions调用commit传递给mutations，然后再mutations里面完成所有逻辑操作 如果数据是通过发起ajax之后才能拿到的话，就必须要通过actions才可以，如果数据本来就有，就可以不用通过actions，直接调用commit就可以

如何创建并配置Vuex

Vue2版本只能使用Vuex3 Vue3只能使用Vuex4

步骤

1.在src文件夹下创建一个store文件，在store文件下创建一个index.js文件

2.在index.js文件中写创建Vuex的代码

// 引入Vuex
import Vue from 'vue'
//引入Vue
import Vuex from 'vuex'
//准备actions,用于响应组件中的动作，比如ajax请求等
const actions = {}
//准备mutations，用于操作数据（state）
const mutations = {}
// 准备，用于存储数据
const state = {}
//因为必须在调用Vuex之前把Vuex挂载到Vue身上，所以需要在index.js文件中调用Vue.use进行注册挂载
Vue.use(Vuex)
​
export default new Vuex.Store({
actions,
mutations,
state
})
​

3.在main.js文件中导入Vuex的js文件，然后注册

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index.js'
Vue.config.productionTip = false
​
new Vue({
store,
render: h => h(App)
}).$mount('#app')
​

在actions中定义的函数可以接收到两个参数

第一个参数是一个残缺版的store

第二个参数就是传递过去的值

如何调用

//在组件中调用dispatch方法，调用actions里面的jia这个函数方法传递过去一个value值
this.$store.dispatch('jia', this.msg)
​
//在Vuex的js文件中 给actions添加一个jia这个函数方法
//这个函数方法有两个参数  第一个参数是残缺版的store，第二个参数就是调用dispatch传递过来的value值
const actions = {
  jia(context, value) {
    // console.log('action里面的jia被调用', a, b)
    context.commit('JIA', value)//这个是表示调用mutations里面的名叫JIA的函数方法  传递过去一个value值
  },
}
​
​
​
const mutations = {
  JIA(state, value) {  //这个JIA函数有两个参数 第一个是state，里面有在state中存放的数据  第二个就在actions中调用该方法传递过来的value数据
      
    // console.log('mutations里面的jia被调用', a, b)
    state.sum += value
  },
}

基本使用

<template>
  <div class="app-container">
    <h3>最新的数值是:{{ $store.state.sum }}</h3>
    <select v-model.number="msg">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: 1
    }
  },
  methods: {
    add() {
      this.$store.dispatch('jia', this.msg)
    }
  },
  mounted() {
    console.log('contr', this)
  }
}
</script>
​

// 引入Vuex
import Vue from 'vue'
//引入Vue
import Vuex from 'vuex'
//准备actions,用于响应组件中的动作，比如ajax请求等
const actions = {
  jia(context, value) {
    // console.log('action里面的jia被调用', a, b)
    context.commit('JIA', value)
  }
}
//准备mutations，用于操作数据（state）
const mutations = {
  JIA(state, value) {
    // console.log('mutations里面的jia被调用', a, b)
    state.sum += value
  }
}
// 准备，用于存储数据
const state = {
  sum: 0,
  // timer: null
  timer: true
}
Vue.use(Vuex)
export default new Vuex.Store({
  actions,
  mutations,
  state
})
​

当state中的数据需要经过加过之后再进行使用时，可以在Vuex中配置一个getters对象 跟计算属性一样 都是通过返回值确定值的，里面的方法接收一个参数 这个参数就是state

如何读取：在store.js中追加getters配置

const getters = {
  bigSum(state) {
    return state.sum * 10
  }
}

在vuex中可以借助mapState帮我们映射state中的数据为计算属性（两种方式）

对象写法

步骤：

1.先在Vuex中的State方法中定义数据

2.在组件中导入mapState import { mapState } from 'vuex'

3.在computed计算属性中使用mapState这个方法

4.mapState使用格式 mapState({sum:'sum',xuexiao:'xuexiao'}) 这个括号里的sum表示的是创建出来的计算属性的方法名 后面引号里面的表示的是去找state里面的sum数据

computed: {
    //mapState({sum:'sum',xuexiao:'xuexiao'})这个返回值就是一个对象，通过...展开运算符把这个对象里面的所有数据放到computed里面
    ...mapState({ sum: 'sum', xuexiao: 'xuexiao', xueke: 'xueke' })
  },

数组写法

只有传递过去的方法名和state中数据名相同时，才能使用数组写法

 ...mapState(['sum', 'school', 'subject'])

mapGetters

用于映射getters中的数据为计算属性，用法和mapState一样

//...mapGetters({ bigsum: 'bigSum' })  对象写法
​
  ...mapGetters(['bigSum']) //数组写法

mapMutations

mapMutations这个方法是直接调用Vuex中index.js文件中的mutations对象中的方法

mapMutations通过mapMutations映射的方法里面的value需要通过调用函数时手动传递参数

...mapMutations(['JIA', 'JIAN'])就相当于是this.$store.commit("JIA",msg) 调用mutations里面JIA这个方法，并传递一个msg参数过去

<button @click="JIA(msg)">+</button>
​
// ...mapMutations({ add: 'JIA', remove: 'JIAN' }),  //对象写法
    ...mapMutations(['JIA', 'JIAN']),  //数组写法    如果想用数组写法，调用的函数名和mutations中的方法名必须一样

mapActions

mapActions这个方法是直接调用Vuex中index.js文件中的mapActions对象中的方法

mapActions通过mapActions映射的方法里面的value需要通过调用函数时手动传递参数

...mapActions(['waittime', 'waittime'])就相当于是this.$store.dispatch("waittime",this.msg) 调用actions里面waittime这个方法，并传递一个msg参数过去 如需传递参数需要在组件中绑定该事件时就传递参数

 
<button @click="ADD(msg)">和为奇数再加</button>  //调用方法时需要自己手动传递参数
...mapActions({ ADD: 'js', waittime: 'waittime' })
...mapActions(['ADD', 'waittime']) //数组形式表示函数名和Vuex中actions里面的方法名一致

\