vuex及语法糖

vuex

@App.vue
<template>
  <div>
    <!-- Vuex模块: 全局状态共享 -->
    <!-- 在多个 .vue 文件中, 共享数据的技术  -->
    <com-one />
    <com-two />
    <com-three />
  </div>
</template>

<script>
import ComOne from './components/ComOne.vue'
import ComThree from './components/ComThree.vue'
import ComTwo from './components/ComTwo.vue'
export default {
  components: { ComOne, ComTwo, ComThree },
}
</script>

<style lang="scss" scoped></style>

@store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 到 main.js 查看:  store在vue初始化时, 会注入到vue对象里
export default new Vuex.Store({
  // 严格模式下: 不允许直接修改state中的值, 必须特殊申请, 才可以
  // 效果: 会报错 但 依然能改
  strict: true, //严格模式: 真
  // 5个核心属性
  // 状态: 存储共享的数据项
  // 到后台查看vue对象, 能不能找到这里
  state: {
    count: 1,
    uname: '壮壮',
    // 存储购物车的数据
    cart: ['旭旭', '剑桥'],
  },
  getters: {},
  // 存储方法, 用来修改state中的值
  // 类似: 壮壮说-要用纸的人 跟我申请, 我帮你去拿
  mutations: {
    // 用于向 cart 属性里, 添加中
    cartAdd(state, user) {
      // 参数1: 固定的state,代表共享的数据
      // 其他参数看情况, 比如此处要传递增加的 用户是谁
      state.cart.push(user) //数组新增数据到末尾
    },
    countAdd1(state) {
      // 固定的参数1: 即共享的数据们
      state.count++
    },
  },
  actions: {},
  modules: {},
})

one

<template>
  <div class="com-one">
    <h1>组件1</h1>
    <!-- <button @click="count++">{{ count }}</button> -->

    <p>共享的count: {{ $store.state.count }}</p>
    <button @click="$store.state.count++">count+1</button>

    <!-- 把值存储在公共的区域, 就可以在多个组件中使用 -->
    <button @click="showVue">查看vue对象</button>

    <hr />
    <!-- 如何触发 store中的 mutations 里的方法？commit -->
    <button @click="$store.commit('cartAdd', '壮壮')">
      把壮壮加入购物车
    </button>
    <button @click="$store.commit('cartAdd', '浩浩')">
      把浩浩加入购物车
    </button>
    <button @click="$store.commit('cartAdd', '兵兵')">
      把兵兵加入购物车
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    showVue() {
      console.log(this) // 找到 store
    },
  },
  data() {
    return {
      count: 1,
    }
  },
}
</script>

<style lang="scss" scoped>
.com-one {
  background-color: brown;
  height: 300px;
  margin-bottom: 20px;
}
</style>

two

<template>
  <div class="com-two">
    <h1>组件2</h1>

    <!-- Vuex的基本原理: 把数据共享, 多个组件都使用共享数据 -->

    <!-- 场景: 壮壮把新买的纸巾放在讲台上共享使用 -->
    <!-- 结果发现: 所有班级的同学都来拿他的纸巾, 一上午就没了 -->
    <!-- 开启严格模式: -->

    <p>共享的count: {{ $store.state.count }}</p>
    <button @click="$store.state.count++">count+1</button>

    <!-- $store提供了一个 commit(委托) 方法, 委托store执行mutations中的函数 -->
    <button @click="$store.commit('countAdd1')">count+1</button>
    <hr />
    <div v-for="(item, i) in $store.state.cart" :key="i">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.com-two {
  height: 300px;
  background-color: aquamarine;
}
</style>

three

<template>
  <div class="com-three">
    <h1>组件3</h1>
    <p>{{ count }}, {{ uname }}, {{ cart }}</p>
    <button @click="cartAdd('陈胜')">陈胜加入</button>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  // mutataions是存函数, 在methods中引入
  methods: {
    // 引入vuex里的方法, 然后直接用就可以
    ...mapMutations(['cartAdd']),
  },

  // 语法糖: 快速在计算属性中引入 store.state 中的变量
  computed: {
    // ... : 展开语法
    // mapState: 会自动遍历数组中的元素, 生成计算属性 --
    // 对原理感兴趣的看扩展视频 -- 百度网盘(未录制)
    ...mapState(['count', 'uname', 'cart']),
  },
}
</script>

<style lang="scss" scoped>
.com-three {
  background-color: yellowgreen;
  min-height: 100px;
  margin-top: 10px;
}
</style>

Vuex

全局状态共享: 把数据在多个.vue文件中共享

• 实现方案: 把 store对象, 存储到 vue的实例对象里 – main.js
• 使用时
  • 把共享的数据存储在 store.state 属性里
  • 利用 $store.state 来读取属性
  • 为了安全性考虑: 要修改属性必须通过指定的方法
    • 在mutations属性里, 制作函数
    • 触发时, 需要用 commit 来触发

语法糖

 // mutataions是存函数, 在methods中引入
  methods: {
    // 引入vuex里的方法, 然后直接用就可以
    ...mapMutations(['cartAdd']),
  },

  // 语法糖: 快速在计算属性中引入 store.state 中的变量
  computed: {
    // ... : 展开语法
    // mapState: 会自动遍历数组中的元素, 生成计算属性 --
    // 对原理感兴趣的看扩展视频 -- 百度网盘(未录制)
    ...mapState(['count', 'uname', 'cart']),
  },