Vuex笔记

1. Vuex介绍

• ​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

2. Vuex快速使用

1. 创建vue项目，并安装vuex依赖

   npm install vuex
   

2. vue项目中src目录下新建store目录，并添加index.js文件，输入以下代码

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   
   const store = new Vuex.Store({
       state:{
           count:1
       },
       mutations:{
           add(state){
               state.count ++;
           },
           adds(state,data){
               state.count += data;
           },
           reduce(state){
               state.count --;
           },
           reduces(state,data){
               state.count -= data;
           }
       }
   })
   export default store
   
   

3. 在main.js中导入store.js，并注册到vue中

   import Vue from 'vue'
   import App from './App.vue'
   import store from './store'
   
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
     store  //注册vuex的store
   }).$mount('#app')
   

4. 在vue中进行使用

   <template>
     <div id="app">
       count:{{$store.state.count}}
        <div>
             <button @click="reduceCount" style="60px;height:30px">减</button>
             <button @click="reduceCounts(2)" style="60px;height:30px">减2</button>
         </div>
     </div>
   </template>
   <script>
   export default {
     methods:{
       reduceCount(){
         this.$store.commit('reduce');
       },
        reduceCounts(data){
         this.$store.commit('reduces',data);
       }
     }
   }
   </script>
   

3. Vuex构成

• state:存储状态(变量)

• getters：对数据获取之前的再次编译，可以理解为state的计算属性。在组件中使用 $sotre.getters调用

• mutations：同步修改state，在组件中使用$store.commit('',params)调用。

• actions：异步修改state。在组件中使用$store.dispatch('',params)调用

• modules：store的子模块，用起来和上面的一样。主要用于大型应用中，方便状态管理。

4. 完整示例

• store/index.js

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

Vue.use(Vuex);

const moduleA = {
  state: {
    userName: 'zhangsan'
  }
};

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addCount(state) {
      state.count++;
    },
    addCounts(state, params) {
      state.count += params;
    }
  },
  actions: {
    addCountAction({ commit }) {
      commit('addCount');
    },
    addCountsAction({ commit }, params) {
      commit('addCounts', params);
    }
  },
  getters: {
    EvenOrOdd(state) {
      return state.count % 2 === 0 ? '偶数' : '奇数';
    }
  },
  modules: {
    moduleA
  }
});

• main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

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

• app.vue

<template>
  <div>
    name:{{ $store.state.moduleA.userName }}<br>
    count:{{ $store.state.count }}，是{{ $store.getters.EvenOrOdd }}
    <div>
      <button class="btn" @click="add">
        通过mutations添加
      </button>
      <button class="btn" @click="add2(2)">
        通过mutations添加(带参数)
      </button>
      <button class="btn" @click="add3()">
        通过actions添加
      </button>
      <button class="btn" @click="add4(2)">
        通过actions添加(带参数)
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    add() {
      this.$store.commit('addCount');
    },
    add2(params) {
      this.$store.commit('addCounts', params);
    },
    add3() {
      this.$store.dispatch('addCountAction');
    },
    add4(params) {
      this.$store.dispatch('addCountsAction', params);
    }
  }
};
</script>
<style scoped>
.btn{
   200px;
  height: 38px;
  border-radius: 6px;
  padding: 10px;
  margin: 10px;
  background: #498ef0;
}
</style>