Vuex:store,actions,mutations,state,getters,mapState,mapGetters,mapMutations,mapActions使用

**

搭建vuex环境

**
1.安装 npm i vuex

2. 引入store;
   import store from ‘您的存储路径’
   在new 中 写store使用store;
   

创建store两种方式
src下创建store文件夹,新增一个index.js文件
编写index.js文件 创建三个对象，它们是actions ,mutations,state

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

Vue.use(Vuex)
// 准备actions - 用于响应组件中的操作;
const actions = {

}
// 准备mutations - 对于运行数据(state);
const mutations = {

}
// 准备state - 用于存储数据;
const state= {

}
// 准备state - 用于将state中的数据;这有点像计算属性。可以处理state中的值;
const getters = {

}
//创建和公开store
export default  new Vuex.Store({
    actions,
    mutations,
    state,
    getters 
})

**

基础使用

**

注意:第一个箭头,直接跳跃mutations中的方法可以直接更改。state,
第二支箭是跳跃actions的方法中,然后输入mutations方法再次更改state;

**

getter使用,这有点像计算属性。,可以处理state中的值

**

这个bigSum 如何使用它

    this.$store.getters.bigSum (js中,html中去掉this也可使用)

**

mapState和mapGetters的使用

**

引入mapState
import { mapState ,mapGetters } from ‘vuex’

**

注意 重点来了 ：复制你自己

**

store-》index.js

// 引入vuex
import Vue from vue
import Vuex from vuex
import {nanoid} from nanoid

Vue.use(Vuex)
// 准备actions - 用于响应组件中的操作;
const actions = {
  oddJia (actionObJ, val) {
    console.log(actionObJ)
    if (actionObJ.number % 2 === 0) return alert(number只有当它是基数时才能添加！)
    actionObJ.commit(jia, val)
  },
  setTJia (actionObJ, val) {
    setTimeout(() => {
      actionObJ.commit(jia, val)
    }, 1000)
  }
}
// 准备mutations - 对于运行数据(state);
const mutations = {
  addStudent (state, value) {
    value.id = nanoid()
    state.studentList.unshift(value)
  },
  jia (state, value) {
    state.number += Number(value)
  },
  jiang (state, value) {
    state.number -= Number(value)
  }
}
// 准备state - 用于存储数据;
const state = {
  number: 30,
  studentList: [
    {name: 桑三, id: 001}
  ]
}
// 准备state - 用于将state中的数据;这有点像计算属性。可以处理state中的值;
const getters = {

}
// 创建和公开store
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})

组件1，

组件2

**

观看视频后遇到的问题

**
1.mapState和mapGetter 写入已计算的属性；
2.mapMutations和mapActions 在方法中写入；
3.actions需要调用中的方法。mutations方法，并且名称保持一致；

**

1.模块化 + 命名空间

**
注意：包装注意事项
1.namespaced:true
2.在模块化之后，应该使用它 ：

3.指定名称；

4.如果用的commit请注意，方法请求应写在下图中

最后，学生和号码分别放在不同的文件夹中，便于管理。
新建js

在store中引入 这个名称是由它自己定义的。只是随随便便地定义它，并保持它的一致性；