Vuex笔记

Posted 2021-05-27 Scorpioz

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="width:60px;height:30px">减</button>
             <button @click="reduceCounts(2)" style="width: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{
    width: 200px;
    height: 38px;
    border-radius: 6px;
    padding: 10px;
    margin: 10px;
    background: #498ef0;
  }
  </style>