vue项目中使用vuex

Dear 丶 2023-01-13 05:57 202阅读 0赞

### 说明 ###

> 此处仅做简单的记录，并没有详细的去整理。

### 步骤 ###

1、通过命令在项目根目录安装vuex

npm install vuex --save-dev

2、然后在src目录下新建一个store文件夹，在文件夹中新建index.js文件，在此文件中输入以下代码：

import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store();
    
    export default store;

3、然后在main.js文件里面，将store全局注入一下，这样一来在每个组件中就可以使用this.$store了，如下：

import Vue from 'vue'
    import App from './components/system/index/Index.vue';
    import store from './store';
    
    Vue.config.productionTip = false
    
    new Vue({
      store,
      render: h => h(App),
    }).$mount('#app')

4、返回我们新建的store目录下的index.js文件，添加state对象和一个测试属性，然后改写Store()方法的实例化代码，如下：

import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const state = {
    
        _defaultThemeColor: '#409EFF',       //系统默认主题背景色
    };
    
    const store = new Vuex.Store({
        state
    });
    
    export default store;

5、做完上面的操作步骤之后，我们就可以在其他组件中通过this.$store.state.\_defaultThemeColor来获取我们在index.js中定义的属性值了。

6、但上面获取值的方式并不是我们官方推荐的方法，官方提供了一个getters来获取值，代码如下：

import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const state = {
    
        _defaultThemeColor: '#409EFF',       //系统默认主题背景色
    };
    
    const getters = {
    
        _getDefaultThemeColor() {           //名字随意取
            return state._defaultThemeColor;
        }
    };
    
    const store = new Vuex.Store({
        state,
        getters
    });
    
    export default store;

7、除了取值之外，我们还涉及到赋值，所以我们可以通过mutations来修改我们在store里面定义的值，如下：

import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const state = {
    
        _defaultThemeColor: '#409EFF',       //系统默认主题背景色
    };
    
    const getters = {
    
        _getDefaultThemeColor() {           //名字随意取
            return state._defaultThemeColor;
        }
    };
    
    const mutations = {
    
        _setDefaultThemeColor(state,value) {
            state._defaultThemeColor = value;
        }
    };
    
    const store = new Vuex.Store({
        state,
        getters,
        mutations
    });
    
    export default store;

8、这时候就可以通过this.$store.commit('newNum',6)来改变store中的值了。