vue3.0中使用vuex

目录

一、前言

二、vuex介绍

三、项目搭建

四、vuex使用

①state

②mutations

③actions

---

一、前言

学习了vue3.0，vuex也是一个必不可少的知识点。在学习完后，也可以发现vuex也是比较容易上手。提示：项目是用vue-cli进行搭建的。

二、vuex介绍

• 官网介绍：Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
• 我们理解：Vuex是采用集中式管理组件依赖的共享数据的一个工具vue插件，可以解决不同组件数据共享问题

 

 

•  state管理数据，管理的数据是响应式的，当数据改变时驱动视图更新。=>类似与组件的data
• mutations更新数据，state中的数据只能使用mutations去改变数据
• actions 把数据提交给mutations，可以进行异步操作，不能直接修改state
• getters 对数据获取之前进行再次编译，可以理解为state的计算属性
• modules 它可以来帮我们的状态树分隔成不同的模块，由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

三、项目搭建

首先使用vue-cli创建一个项目

vue create app（项目名称）

创建项目没选择vuex，需要单独安装和初始化

npm i vuex --save

创建store文件，项目文件目录如下

 store的index.js

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

const store = createStore({
    // state:{},
    state(){},
    mutations:{},
    getters:{},
    actions:{},
    modules:{}
})
export default store

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//  引入 vuex  
import store from './store/index'
// 引入 animate.css --save 动画插件
import 'animate.css'
// 挂载 
createApp(App).use(router).use(store).mount('#app')

四、vuex使用

①state

②mutations

 mutations:{
        addCount(state){
            state.count++
        },
        reduceCount(state){
            state.count--
        }
    },

        在组件调用

 methods:{
    ...mapMutations(['addCount']),
    add(){
      // this.$store.commit('addCount');
      // 方式二
      this.addCount()
    },
    reduce(){
      this.$store.commit('reduceCount');
    }
  }

③actions

actions:{
        asyncAddCount(context){
            setTimeout(()=>{
                context.commit('addCount')
            },1000)
        },
        asyncReduceCount(context){
            setTimeout(()=>{
                context.commit('reduceCount')
            },1000)
        }
    },

组件中

 

---

ps：getters和modules下期提到哦！是不是很简单！小伙伴们快试试吧！