【Vue3学习】Vuex 状态管理 store

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

安装

npm

npm install vuex@next --save

yarn

npm install vuex@next --save

基本使用

1)创建文件src/store/index.js,内容如下:

import { createStore } from 'vuex'

// 创建一个新的 store 实例
export default createStore({
  state:  {
      count: 0
  },
  getters:{
    evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
  },
  mutations: {
    increment (state, n) {
      state.count+=n
    }
  },
  actions: {
    increment(context,n){
      context.commit('increment',n)
    }
  }
})

2)在main.js中引入store/index.js

import App from './App.vue'
// 引入store
import store from './store';

const app = createApp(App)
// 使用store //
app.use(store)

3)在组件中使用

<template>
  
  <div>
    <h3>Count demo</h3>
    useStore:{{ count }} 
    <button @click="increment()">increment</button>
    <div>evenOrOdd:{{ evenOrOdd }}</div>
    <button @click="addByAction()">addByAction</button>
    <button @click="addPromise()">incrementPromise</button>
  </div>
  
</template>

<script setup>

import { computed } from 'vue'
import { useStore  } from 'vuex'
// 通过useStore得到store对象
const store = useStore()
// 通过计算属性得到state.count
const count = computed(()=> store.state.count)
function increment(){
  // 提交commit,调用Mutation中的increment方法
  store.commit('increment',1)
}
// 通过计算属性得到getters.evenOrOdd
const evenOrOdd = computed(()=>store.getters.evenOrOdd)
// 分发action,触发方法increment
function addByAction(){
  store.dispatch('increment',1)
}
</script>

4)运行工程,界面如下

【Vue3学习】Vuex 状态管理 store_第1张图片

核心概念

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

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

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
【Vue3学习】Vuex 状态管理 store_第2张图片

1、State

单一状态树

Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。

mapState 辅助函数

使用 mapState 辅助函数帮助我们生成计算属性

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

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

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

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

数组

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

对象展开运算符

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

注意,mapState等辅助函数不能再组合式api

你可能感兴趣的:(前端,javascript,开发语言,vue.js,前端)