温故知新Vue3中的Vuex

目录

1.创建vue3的应用

2.创建store

3.以简单的计数器为例

3.1 创建组件

3.2 state

3.3 mutation更新coutn的值

3.4 action

3.5 getter

---

Vue应该是在复杂的应用中常用的vue核心插件，下面是官网中对Vuex的介绍，其中红色的字体是需要着重注意的：

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。 

 示例代码地址vuex温故知新

1.创建vue3的应用

这里使用命令行创建，命令行创建要求node版本要改与v15，执行命令

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示。

创建完成后，npm install 安装依赖，npm run dev运行程序

2.创建store

在src目录下创建store文件夹，在store文件下创建index.js

import { createStore } from 'vuex'

export default createStore({
    state: {    
    },
    mutations: {     
    },
    actions: {
    },
    modules: {
    }
})

在main.js中引入store

import store from './store'

createApp(App)
    .use(store)
    .mount('#app')

3.以简单的计数器为例

3.1 创建组件

创建组件Addition

创建组件Subtraction

在App.vue中引入这两个子组件

3.2 state

在store/index.js中定义count

 state: {
        count: 0
    },

并在子组件中获取count的值，有两种方式

一种是直接通过store来获取

当前最新的count值为：$store.state.count

一种是通过引入mapState来获取

 
当前最新的count值为：{{count}}
import {mapState} from 'vuex'
export default {
  data(){
    return{

    }
  },
  computed: {
    ...mapState(['count'])
  } 
}

3.3 mutation更新coutn的值

在store/index.js中定义操作count值的方法

export default createStore({
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count ++
        },
        addN(state,step) {
            state.count += step
        },
        sub(state){
            state.count --
        },
        subN(state,step){
            state.count -= step
        }
    },
    actions: {
    },
    modules: {
    }
})

在组件中调用时有两种方式

一种是通过store直接调用

 this.$store.commit('add')
 //携带参数
 this.$store.commit('addN',2)

一种是通过引入mapMutations来进行调用

import {mapState , mapMutations} from 'vuex'

...mapMutations(['sub']),
btnHandle(){
  this.sub()
},
btnHandleN(){
  this.subN(2)
}

3.4 action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

 在store/Index.js的actions中定义异步操作count的方法:

actions: {
        addAsync(context){
            setTimeout(()=>{
                context.commit('add')
            },1000)
        },
        addNAsync(context,step){
            setTimeout(()=>{
                context.commit('addN',step)
            },1000)
        },
        subAsync(context){
            setTimeout(()=>{
                context.commit('sub')
            },1000)
        },
        subNAsync(context,step){
            setTimeout(()=>{
                context.commit('subN',step)
            },1000)
        }

引用异步操作count的方法有两种：

一种是通过直接引用

 // 异步更新count的值
    btnHandleAsync(){
      // dispatch触发action
      this.$store.dispatch('addAsync')
    },
    btnHandleNAsync(){
      this.$store.dispatch('addNAsync',5)
    }

一种是引入mapActions后调用

import {mapActions} from 'vuex'

-1 Async
-N Async

3.5 getter

有时候我们需要从 store 中的 state 中派生出一些状态，后者是进行一些运算

在store/index.js中添加getters属性

 getters: {
        showNum(state){
            return '当前最新的数量是【'+state.count+'】'
        }
    }

调用方式

{{$store.getters.showNum}}

 {{showNum}}


import {mapGetters} from 'vuex'
 computed: {
     
    ...mapGetters(['showNum'])
  },