VueX的简介，以及使用方法（一）——VueX的简介与引用

VueX的简介

　　一、VueX是什么：

　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

　　　二、为什么要使用VueX：

　　如果项目里有很多页面（组件、视图），页面之间存在嵌套关系，且这些页面都需要共享一个状态。

　　　则会产生两个问题：

　　　多个视图依赖同一个状态。例如：商品列表，进入商品详情页面，在点击购买进入结算页面。此时详情与结算都依赖于商品id这个同一个状态。
　　　不同视图行为需要变更同一状态。例如：首页显示与详情显示，同时依赖于同一个状态。

　　　对于问题1：一般解决办法为，父子组件传参，虽然麻烦但可以解决。

　　　对于问题2：可以使用，总线模式，或者父子直接引用。

　　　都可以解决，但是过于繁琐，如果小项目无所谓，但是同一句话*1000就是很大的一串垃圾代码。

　　　所以引用VueX。

　　三、引入VueX：　　

　　　第一种：在创建项目时候就引用。不确定有无创建的可以去package.json下查看。

　　　第二种：在命令行中输入安装指令，回车。

npm install vuex --save

　　　然后配置VueX，在src下创建store文件夹（可以更改，一般都使用一样方便阅读），然后创建index.js文件。内容如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

　　　然后修改main.js

import store from './store'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

　　　在App.vue内引用

export default {
  methods: {

  },
  mounted () {
    // 使用this.$store.state.xxxx可以直接访问到仓库内的状态。
    console.log(this.$store.state)
  }
}

　　　以上就是VueX的简介与引用，算是VueX的基础入门了，下一篇讲解VueX的核心概念。

本文摘自：https://www.cnblogs.com/

VueX的简介，以及使用方法（一）——VueX的简介与引用2022-05-11 11:02:18

VueX的简介，以及使用方法（一）——VueX的简介与引用
2022-05-11 11:02:18