vuex核心概念state,mutations,actions,getters

初始化文件夹
indedx.js

// vuex的使用步骤
// 1. 下载 yarn add vuex -S / npm i vuex - S
// 2. 导入
// 何时需要些相对路径: 自己写的文件(非node_modules中的)
// 何时直接写包名：node的内置模块或者yarn/npm下载的第三方包
// 3. 注册
import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)// 会给组件添加 $store     $route $router

// 4. 创建store对象
const store = new Vuex.Store({
  // 4.1 state - 存储共享的数据源 - 类似data函数
  state: {
    num: 100
  },
  // 4.2 mutations - 唯一 同步 修改的 state的 数据操作员 , 本质就是函数
  mutations: {
    addNum (state, val = 1) {
      // state.num = state.num + val
      state.num += val
    },
    subNum (state, val = 1) {
      state.num -= val
    },
    setNum (state, val) {
      state.num = val
    }
  },
  // 4.3 actions - 异步修改state，但是 最终还是需要 commit 到 mutations中 , 本质也是函数
  actions: {
    asyncAddNum (store, val = 1) {
      setTimeout(() => {
        store.commit('addNum', val)
      }, 2000)
    },
    asyncSubNum (store, val = 1) {
      setTimeout(() => {
        store.commit('subNum', val)
      }, 2000)
    }
  },


//
getters: {
        allCount(state) {
            return state.goodsList.reduce((sum, obj) => {
                if (obj.goods_state === true) {
                    sum += obj.goods_count
                }
                return sum
            }, 0)
        },
        allPrice(state) {
            return state.goodsList.reduce((sum, obj) => {
                if (obj.goods_state === true) {
                    sum += obj.goods_count * obj.goods_price
                }
                return sum
            }, 0)
        }
    },
})
// 5. 导出
export default store // 给 main.js 使用

Addltem.vue

<template>
  <div>
    <h3>AddItem组件</h3>
    <p>已知库存数: {{ $store.state.num }}</p>
//
 <span class="price">¥ {{ allPrice }}</span>
  <span class="price">¥ {{ allCount  }}</span>
    <button @click="addFn">库存+1</button>
    <button @click="asyncAddNumFn">延迟2秒，库存+5</button>
  </div>
</template>

<script>
export default {
  name: 'AddItem',
  methods: {
    addFn () {
      this.$store.commit('addNum')
    },
    asyncAddNumFn () {
      this.$store.dispatch('asyncAddNum', 5)
    }
  }
}
</script>

SubItem.vue

<template>
  <div>
    <h3>SubItem组件</h3>
    <p>已知库存数: {{ num }}</p>
    <p>{{ age }}</p>
    <button @click="subFn">库存-1</button>
    <button @click="asyncSubNumFn">延迟2秒，库存-5</button>
  </div>
</template>

<script>
// 目标：映射使用 state
// 1、 从 vuex 中 按需导入 相应的 辅助函数 mapState
// 2. 把vuex - state 数据源 映射到当前组件的 computed 中

// 目标：映射 使用 mutations
// 1. 从 vuex 中 按需导入 相应的 辅助函数 mapMutations
// 2. 把vuex - mutations函数 映射到当前组件的 methods 中

import { mapState, mapMutations, mapActions } from 'vuex'
/*
console.log(mapState(['num']))
  {
    num(){
      return 100
    }
  }
*/
export default {
  name: 'SubItem',
  computed: {
    // 把mapState返回的对象解开（
    // 把返回的对象的键值对取出来卸载到computed中）
    ...mapState(['num', 'age'])
  },
  methods: {
    ...mapMutations(['subNum']),
    ...mapActions(['asyncSubNum']),
    subFn () {
      this.subNum()
    },
    asyncSubNumFn () {
      this.asyncSubNum(5)
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <h1>根组件</h1>
    <span>库存总数:</span>
    <!-- <input type="text" v-model="$store.state.num"> -->
    <input type="text" :value="num" @input="inputFn">
    <!-- v-model = v-bind + v-on -->
    <div style="border:1px solid black; width: 300px;">
      <AddItem/>
    </div>
    <hr>
    <div style="border:1px solid black; width: 300px;">
      <SubItem/>
    </div>
  </div>
</template>

<script>
import AddItem from './components/AddItem'
import SubItem from './components/SubItem'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'App',
  computed: {
    /* mapState两种传参数区别
    1. 数组：不能对state中变量重命名
    2. 对象：可以对state中变量重命名，
            属性名是留在原地的计算属性的名字，
            属性值是要映射的state数据变量的名字
    */
    ...mapState(['num'])
    // ...mapState({
    //   a: 'num'
    // })
  },
  components: {
    AddItem,
    SubItem
  },
  methods: {
    ...mapMutations(['setNum']),
    inputFn (e) {
      // this.$store.commit('setNum', +e.target.value)
      this.setNum(+e.target.value)
    }
  }
}
</script>

<style>
#app {
  width: 300px;
  margin: 20px auto;
  border:1px solid #ccc;
  padding:4px;
}
</style>

语法总结:
使用state :方式方式1: 组件内 - 直接使用

this.$store.state.变量名

方式2: 组件内 - 映射使用 (推荐)

// 1. 拿到mapState辅助函数
import { mapState } from 'vuex'
export default {
  computed: {
    // 2. 把state里变量映射到计算属性中
    ...mapState(['state里的变量名'])
  }
}

---

使用mutations :方式方式1: 组件内 - 直接使用

this.$store.commit("mutations里的函数名", 具体值)

方式2: 组件内 - 映射使用 (推荐)

// 1. 拿到mapMutations辅助函数
import { mapMutations } from 'vuex'
export default {
  methods: {
    // 2. 把mutations里方法映射到原地
    ...mapMutations(['mutations里的函数名'])
  }
}

使用actions :方式方式1: 组件内 - 直接使用

this.$store.dispatch('actions函数名', 具体值)

方式2: 组件内 - 映射使用 (推荐)

// 1. 拿到mapActions辅助函数
import { mapActions } from 'vuex'
export default {
  methods: {
    // 2. 把actions里方法映射到原地
    ...mapActions(['actions里的函数名'])
  }
}

---

getters

//直接使用
this.$store.getters.计算属性的名字

//映射使用
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getters中计算属性的名字'])
  }
}

总结

1. state、getters 都是 映射 在 组件 的 computed 中

2. mutations、actions 都是 映射 在 组件 的 methods 中

3. mutations 和 actions的区别

   相同点：本质 都是 函数、

   不同点：

   1. mutations: 唯一 并且 同步 修改 state的
   2. actions： 异步 修改 state的、但它不能直接改，最终 必须 commit 到 mutations 上
   3. 第一个形参的区别：mutations 第一个 形参 是 state，actions 第一个 形参 是 store

4. 何时需要使用vuex？

   ​ 多个组件需要 共享 数据 的时候，如果组件是 父子关系， 用 父传子 或 子传父