开局一张图，理解Vuex

左手的ㄟ右手 2023-02-24 11:18 28阅读 0赞

Vuex作为一个组件来使用，可以更好的管理和维护整个项目的组件状态。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

### Vuex 的基本用法 ###

vue-router基础上开发  
首先通过Npm进行安装：

npm install --save vuex

import Vue from 'vue'；
    import VueRouter from 'vue-router'；
    import Vuex from 'vuex'；
    import App from './app.vue'；
    
    Vue.use(VueRouter)；
    Vue.use(Vuex)；

vuex配置

const store =new Vuex.Store({ 
    //vuex的配置
    });

new Vue({ 
    el:'#app',
    router:router,
    //使用vuex
    store:store,
    render:h=>{ 
    return h(App)
    }
    });

仓库store包含了应用的数据(状态)和操作过程，Vuex里的数据都是响应式的，任何组件使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。

来自store的数据只能读取($store)，不能手动改变，改变store中数据的唯一方法是显示的提交mutations。

#### 提交mutations ####

const store =new Vuex.Store({ 
    state:{ 
    cunt:0;
    },
    mutations:{ 
    increment(state){ 
    state.count ++;
    },
    decrease(state){ 
    state.count --;
    }
    }
    });

#### 执行mutations ####

通过this.$store.commit方法来执行mutations。在index.vue中添加按钮用于就加减。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]  
在methods中执行mutations来改变store里的数据。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20230209/9ba5a6ca11c442fa8893a5e701c5bfee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: /images/20230209/765736c1f60a4ec8a41d7ac28b76f16f.png