vue3.x中状态管理工具vuex的基本使用

vuex是专门为vue应用程序开发的状态管理模式（vuex官网），主要可是实现不用组件之间的状态共享以及组件里面数据的持久化，主要有state（定义状态）、getters（计算属性）、mutations（触发方法修改state里面的数据）、actions（执行异步方法）、modules（模块）五个核心概念。

vuex的基本使用

安装依赖(npm与yarn)

npm安装
npm install vuex@next --save

yarn安装
yarn add vuex@next --save

在src目录下新建一个vuex的文件夹，vuex文件夹里面新建一个store.js文件，store.js文件的内容

//引入createStore 
import { createStore } from 'vuex'

// 定义store仓库
const store = createStore({
  state(){
    return {
      count:1
    }
  },
  mutations:{
  // 方法，修改state里面的数据
    increment(state){
      state.count++
    }
    // 传值,第一个属性是state状态，第二个属性是传过来的值
    setCount(state,num){
      state.count = num
    }
  }
})

//暴露stroe
export default store;

在main.ts中挂载Vuex

import { createApp } from 'vue'
import App from './App.vue'

// 全局引入store
import store from './vuex/store'


const app = createApp(App)

// 全局挂载store
app.use(store)

app.mount("#app")

获取state的方法

在组件中引入store，然后在计算属性里面获取（不推荐使用的方法）

<template>
<div>
  <!-- 组件中使用 -->
  {{count}}  
</div>

</template>

<script>
// 引入store
import store from './vuex/store'
export default {
  name: 'App',
  data(){
    return{
      
    }
  },
  computed:{
    count(){
      return store.state.count
    }
  },
  created() {
  },
  methods: {
  },
}
</script>

由于全局配置了Vuex，所以我们直接可以通过下面的方法获取state

<template>
<div>
  <!-- 组件中使用 -->
  {{count}}  
</div>

</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      
    }
  },
  computed:{
    count(){
      return this.$store.state.count
    }
  },
  created() {
  },
  methods: {
  },
}
</script>

修改state状态和方法传值

<template>
<div>
  <!-- 组件中使用 -->
  {{count}}
  <button @click="add">加一</button> 
  <button @click="setCount(10)">修改count为10</button> 
</div>

</template>

<script>
// 引入store
import {mapState} from 'vuex'
export default {
  name: 'App',
  data(){
    return{
      
    }
  },
  created() {
  },
  methods: {
     add(){
       this.$store.commit('increment') // 名称与store.js中的mutations里面的方法名统一起来
     },
     // 传值
     setCount(num){
         this.$store.commit('setCount',num)
     }
  },
}
</script>

第三种获取state的方法，利用mapState

<template>
<div>

  {{count}}
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'App',

  data(){
    return{
      bar:'225',
    }
  },
  computed:{
    ...mapState(['count']) // 映射state中的 属性
  },
   provide(){
    return{
      title:'我是provide方法'
    }
  },
  created() {
  },
  methods: {
  },
}
</script>

<style>
</style>