Vue - vuex

Vuex是什么

vuex是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。

使用Vuex的好处：

1、数据的存取一步到位，不需要层层传递

2、数据的流动非常清晰

3、存储在Vuex中的数据都是响应式的

vuex分为五个大块

state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）

mutations ： 使用它来修改数据(类似于methods)

getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )

actions： 发起异步请求

modules： 模块拆分

vuex使用

1.在store/index.js 创建store对象,并导出

//用于创建Vuex的核心对象Store
//1.导入
import {createStore } from 'vuex'

//2.创建Store对象
const store = createStore({
    //state 用于存储数据
    state(){
       return {
          sum:0,
       }
    },
    //actions 用于响应组件中的事件
    actions:{
        increment:function(context,value){
            //actions通过commit去触发mutations
            context.commit("INCREMENT",value)
        },
        decrement(context,value){
            context.commit("DECREMENT",value)
        }

    },
    //mutations 用于操作数据
    mutations:{
        //mutations去更新state数据
        INCREMENT(store,value){
            store.sum +=value;   
        },
        DECREMENT(store,value){
            store.sum -= value; 
        }
    }
});


//3.暴露出store对象
export default store;

2.在main.js 使用store, 把store绑定到app实例对象

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

//导入router/index.js,得到路由器对象
//import router from './router/index'
//如果目录下的js文件名为index.js, 导入时候,不需要写index
import router from './router'

//导入store
import store from './store'

//保存到App的实例对象
createApp(App).use(router).use(store).mount('#app')

3.使用vuex

<template>
    <div>
        <h2>和:{{$store.state.sum}}</h2>
        <input type="number" length="3" v-model="num"/>
        <input type="button" value="+" @click="add"/>
        <input type="button" value="-" @click="sub"/>
    </div>
</template>

<script>
export default {
    name: 'CalcSum',

    data() {
        return {
            num:1,
        };
    },

    mounted() {
        
    },

    methods: {
        add(){
            //通过dispatch去提交一个action
            this.$store.dispatch('increment', this.num);
        },
        sub(){ atch('decrement', this.num);
        },
    },
};
</script>

<style lang="css" scoped>

</style>

核心概念

1. 单一状态树：所有的数据都是存放在一个store对象，每个组件将仅仅包含一个store实例

   vuex存放的数据，应该是共享的，每个组件特有的数据，应该还是存放在组件的data上

   数据文件可以使用多模块，最终都是位于同一个store

2. state：存放状态

   提供简化函数：获取state中的数据：mapState 辅助函数

小结

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择