Vuex的使用（一）——在项目中引入Vuex-蒲公英云

Vuex的使用（一）——在项目中引入Vuex

港控/mmm° 2022-09-09 06:41 317阅读 0赞

参考文档：https://vuex.vuejs.org/zh/guide/

如果当前没有项目代码，可以访问传送门搭建一个，以下Vuex相关功能都是在传送门搭建项目的基础上开发的。

首先是Vuex的创建（新增文件路径为src\store\index.js），代码如下：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({ 
    state: { 
        param1: "state param"
    }
});
export default store;

向Vue中注入Vuex（修改文件路径为src\main.js，在创建Vue实例时增加了strore属性），代码如下：

import Vue from 'vue'
import store from './store'
import ComponentA from './components/ComponentA.vue'
new Vue({ 
    el: '#app',
    store,
    components: {  ComponentA },
    template: '<div><component-a></component-a></div>'
});

在组件中使用Vuex的state（修改文件路径为src\components\componentA.vue），代码如下：

<template>
    <div>
        <span>stete in vuex：{ { param1}}</span>
    </div>
</template>
<script>
export default { 
    name: "component-a",
    computed: { 
        param1() { 
            // 注意是在计算变量中使用state，这样计算变量param1才能实时感知到state里param1的变化
            return this.$store.state.param1;
        }
    }
};