vue3学习11：vuex基本使用

需要导入包：npm install vuex@next --save

创建store/index.js

让我们来创建一个 store。

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
    state () {
        return {
            count: 110
        }
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})

export default  store

在main.js

import { createApp } from 'vue'
import store from "@/store";

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({ /* 根组件 */ })
// 将 store 实例作为插件安装
app.use(store)

创建一个VueXx.vue

<template>
      <h1>vuex学习</h1>

       <h2>vuex的count为 {{$store.state.count}}</h2>
        <button @click="add1">count+1</button>
</template>

<script>
export default {
  name: "VueXx",
  methods:{
    add1(){
      this.$store.commit('increment')
    }
  }
}
</script>

<style scoped>

</style>

在App.vue引用该组件：

<template>
  <div id="app">
    <h1 style="color: #42b983">Router</h1>

    <router-link to="/home">首页</router-link>&nbsp;&nbsp;
<!--    <router-link to="/bookcase">书架</router-link>-->
    <router-link :to="{name:'case'}">书架</router-link>&nbsp;&nbsp;
    <router-link :to="{name:'vuex'}">vuex学习</router-link>

    <router-view></router-view>

  </div>
</template>

效果如下：

你可以通过 store.state 来获取状态对象，并通过 store.commit 方法触发状态变更， 可以通过 this.$store 访问store实例。

mapState 辅助函数
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

有三种形式可以去做：

computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count
    }
  })

<h2>vuex的count为 {{count}}</h2>
<h2>vuex的count为 {{countAlias}}</h2>
<h2>vuex的count为 {{countPlusLocalState}}</h2>

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符，我们可以极大地简化写法

export default {
  name: "VueXx",
  methods:{
    add1(){
      this.$store.commit('increment')
    }
  },
  computed: {
    ...mapState(['count',]),
    

  }
}

<h2>vuex的count为 {{count}}</h2>

mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

还可以改写为，这样可以重新为函数命名：

Mutation使用
每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：


在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：


或者