【Vue】Vuex的安装和实现【全局参数传递】实例（图文+完整源代码）

一、安装Vuex

npm i vuex@3

二、在src新建文件夹store和文件index.js

三、main.js中引用vuex和store

// 引入Vue
import Vue from 'vue'
// 引入app组件，它是所有组件的父组件
import App from './App.vue'
// 引入VueRouter插件
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'

// 引入Vuex
// eslint-disable-next-line no-unused-vars
import Vuex from 'vuex'

// 引入store
import store from './store/index.js'

// ElementUI

import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI


// 关闭vue生产提示
Vue.config.productionTip = false
// 创建vue实例对象 -- vm
const vm = new Vue({
  el: "#app",
  // 完成了这个功能：将APP组件放入窗口中
  render: h => h(App),
  router:'hello',
  store:store,
  beforeCreate() {
    Vue.prototype.$bus = this;
  },

})

console.log(vm);

四、index.js中增加actions、mutations、state属性

// 该文件用于创建Vuex中最为核心的store


// 引入Vue和Vuex

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

// 使用Vuex插件
Vue.use(Vuex)

// 准备actions - 响应组件中的动作
const actions ={}

// 准备mutations - 操作数据(state)

const mutations ={}

// 准备actions - 存储数据

const state={}


// 创建并暴露store

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

console.log(this)

二、全局参数传递的实例

 需要6个文件

 1、main.js

// 引入Vue
import Vue from 'vue'
// 引入app组件，它是所有组件的父组件
import App from './App.vue'
// 引入VueRouter插件
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'

// 引入Vuex
// eslint-disable-next-line no-unused-vars
import Vuex from 'vuex'

// 引入store
import store from './store/index.js'

// ElementUI

import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI


// 关闭vue生产提示
Vue.config.productionTip = false
// 创建vue实例对象 -- vm
const vm = new Vue({
  el: "#app",
  // 完成了这个功能：将APP组件放入窗口中
  render: h => h(App),
  router:'hello',
  store:store,
  beforeCreate() {
    Vue.prototype.$bus = this;
  },

})

console.log(vm);

2、store / index.js

// 该文件用于创建Vuex中最为核心的store


// 引入Vue和Vuex

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

// 使用Vuex插件
Vue.use(Vuex)

// 准备actions - 响应组件中的动作(执行的函数)
const actions = {

    add(context,value) {
        context.commit('ADD',value)
    },

    jian(context,value) {
        context.commit('JIAN',value)
    }

}

// 准备mutations - 操作数据(state)

const mutations = {

    ADD(state,value) {
        state.num=value+1
    },
    JIAN(state,value) {
        state.num=value-1
    },

}

// 准备actions - 存储数据

const state = {
    num: 6
}


// 创建并暴露store

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

console.log(this)

3.App.vue

<template>
  <div id="myapp">
    <!-- 第1行 -->
    <Number_1></Number_1>
    <br />
    <br />
    <Number_2 style="float: left"></Number_2>

    <Number_3 style="float: left"></Number_3>
  </div>
</template>

<script>
// 引入组件

import Number_1 from "./components/Number_1.vue";
import Number_2 from "./components/Number_2.vue";
import Number_3 from "./components/Number_3.vue";

// 注册组件
export default {
  name: "App",
  components: {
    Number_1,
    Number_2,
    Number_3,
  },
  data() {
    return {};
  },
  methods: {
    getInfo(a, b) {
      this.appSchoolName = a;
      this.appAddress = b;
    },
  },
  mounted() {
    console.log("app", this);
  },
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  background-color: rgb(147, 149, 149);
}
#myapp {
  /* background-color: cornflowerblue; */
  /* border: 1px rgb(134, 0, 0) dashed; */
  /* height: 400px; */
  /* padding-top: 20px; */
  /* padding-left: 10px; */
  /* background-color: aqua; */
}
.menu_1 {
  color: red;
}
</style>

4.Number_1.vue(页面显示渲染“全局值”)

<template>
  <div class="m_list">组件1：当前的值为：【{{ $store.state.num }}】</div>
</template>

<script>
export default {
  name: "Number_1",
  mounted() {
  },
};
</script>

<style scoped>
.m_list {
  padding-left: 20px;
  line-height: 50px;
  overflow: hidden;
  width: 91.5%;
  height: 50px;
  margin: 0 auto;
  margin-top: 10px;
  background-color: rgb(240, 240, 240);
}
</style>

5.Number_2.vue

<template>
  <div @click="add">组件2：当前值+1</div>
</template>

<script>

export default {
  name: "Number_2",
  methods:{
    add(){
      this.$store.dispatch('add', this.$store.state.num)
    }
  }
};
</script>

<style scoped>
div {
  margin-top: 10px;
  margin-left: 10px;
  padding-left: 20px;
  line-height: 50px;
  overflow: hidden;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background-color:rgb(247, 226, 226);
}
</style>

6.Number_3.vue

<template>
  <div @click="jian">组件3：当前值-1</div>
</template>

<script>

export default {
  name: "Number_3",
  methods:{
    jian(){
      this.$store.dispatch('jian', this.$store.state.num)
    }
  }
};
</script>

<style scoped>
div {
  margin-top: 10px;
  margin-left: 10px;
  padding-left: 20px;
  line-height: 50px;
  overflow: hidden;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background-color:rgb(247, 226, 226);
}
</style>