VueJS中使用Vuex

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来讲就是在state中定义了一个数据后，可以在项目中的任何一个组件上对该数据进行获取和修改，修改后的数据会在全局上相应变更。

安装vuex相关依赖

npm install vuex --save

然后 在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = {  //要设置的全局访问的state对象，对象的值需要一个初始值
  ZyCheckBox: false,
  MgCheckBox: false
};

const getters = {   //实时监听state值的变化
  updateZyCheckBox(){   //该方法名随意，主要是用来承载变化的ZyCheckBox的值
      return state.ZyCheckBox
  },
  updateMgCheckBox(){
      return state.MgCheckBox
  }
};

const mutations = {   //该对象房改变state的初始值的方法
  newZyCheckBox(state,ZyCheckBox){
    state.ZyCheckBox = ZyCheckBox;
  },
  newMgCheckBox(state,MgCheckBox){
    state.MgCheckBox = MgCheckBox;
  }
};

const actions = {    //自定义触发mutations里面函数的方法
  getNewZyCheckBox(context,ZyCheckBox){      //触发mutations里面的newZyCheckBox方法
    context.commit('newZyCheckBox',ZyCheckBox);
  },
  getNewMgCheckBox(context,MgCheckBox){
    context.commit('newMgCheckBox',MgCheckBox);
  }
};

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
});

export default store;

在main.js里面引入store，然后全局注册一下

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'  //引入store

new Vue({
  el: '#app',
  router,
  store,          //使用store
  components: { App },
  template: '<App/>'
})

然后在需要获取或修改数据的组件上都设置：

computed: {    //监听对象值的变化
    ZyCheckBox() {
      return this.$store.getters.updateZyCheckBox;    //调用store/indexs.js里getters中的updateZyCheckBox方法
    },
    MgCheckBox() {
      return this.$store.getters.updateMgCheckBox;
    }
  },

methods: {   //设置修改对象值方法
    changeZyCheckBox(item) {
      this.$store.dispatch("getNewZyCheckBox", item);
    },
    changeMgCheckBox(item) {
      this.$store.dispatch("getNewMgCheckBox", item);
    }
}

通过了以上设置之后可以通过this.ZyCheckBox拿到值，通过this.changeZyCheckBox(val)设置值；

当在严格模式中使用Vuex 时，在属于 Vuex 的 state 上使用v-model 会报错：

<input v-model="this.ZyCheckBox">   //报错

用“Vuex 的思维”去解决这个问题的方法是：给 <input> 中绑定 value，然后侦听 input 或者 change事件，在事件回调中调用 action:

<input :value="this.ZyCheckBox" @input="updateMessage">


methods: {
    changeZyCheckBox(item) {
      this.$store.dispatch("getNewZyCheckBox", item);
    },
    updateMessage (e) {
      this.$store.dispatch("getNewZyCheckBox", e.target.value);
  }
}

必须承认，这样做比简单地使用“v-model + 局部状态”要啰嗦得多，并且也损失了一些 v-model 中很有用的特性。另一个方法是使用带有 setter 的双向绑定计算属性：

<template>
  <div class="Home">
    <h2>Home</h2>
    <input v-model="ZyCheckBox">{{this.ZyCheckBox}}
  </div>
</template>

<script>
export default {
  name: 'Home',

  data() {
    return {};
  },
  computed: {
    ZyCheckBox: {
      get () {
        return this.$store.state.ZyCheckBox
      },
      set (value) {
        this.$store.commit('newZyCheckBox', value)
      }
    }
  },
methods: {}
};
</script>

<style lang="scss" scoped>
</style>