VUEX使用

背景

针对多个组件依赖于同一状态，来自不同视图的行为需要变更同一状态。使用传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。为此出现了 - VUEX

Vuex 是专门为 Vue.js 设计的状态管理库，
实现了不同组件的数据共享（状态）。

引入项目

在项目中安装vuex、各自的版本对应命令如下
vue2 npm install vuex@3
vue3 npm install vuex
在根路径下创建store文件夹、和index.js文件

//引入vuex
import Vuex from 'vuex';
//引入vue
import Vue from 'vue'
//使用vuex
Vue.use(Vuex)

const state  = {
	//变量存储
  	sharedData:0
};
//内部的方法是串行的
const mutations = {
  ChangeData(context,val){
    //context为state的内容
    context.sharedData +=val
  }
};
//内部的方法是并行的
const actions = {
  changeData(context,val){
    // 调用mutations方法
    context.commit('ChangeData',val)
  }
};
const getters = {

}

//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters

});

在main.js对store全局导入和引用

import App from './App'
import router from './router'
//引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入store
import store from './store'


Vue.config.productionTip = false
Vue.use(ElementUI);

/* eslint-disable no-new */
var  vm = new Vue({
  el: '#app',
  router,
  store,//将store放入vm
  components: { App },
  template: '<App/>'
})

使用案例

编写模板对store的值进行更改

<template>
  <div>
    <h1>store-demo</h1>
    <h3>共享值：{{$store.state.sharedData}}</h3>
    <button @click="increment2">点击+2</button>
  </div>
</template>

<script>
export default {
  name: "StateDemo",
  methods:{
    increment2(){
      // 调用actions的changeData方法，进而调用mutations对state的共享值做出改变
      this.$store.dispatch('changeData',2)
    }
  },
  mounted(){
    console.log(this)
  }
}
</script>

<style scoped>

</style>

测试