vuex 使用

1. 简介

   Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

   它采用集中式储存，管理应用的所有组件的状态。并以相应的规则，保证以一种可预测的方式发生变化（响应式）。

   如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您的应用够简单，您最好不要使用 Vuex。

2. 在项目里使用方法

   没安装vuex的自行安装：npm install vuex

   1. 创建vuex实例
      文件路径：项目/src/store/index.js

      import Vue from "vue";
      import Vuex from "vuex";
      
      Vue.use(Vuex); // vue使用Vuex
      
      export default new Vuex.Store({ // new Vuex.Store() 创建Vuex实例
        state: {},     // 数据仓库（数据的唯一来源）
        getters: {},   // 用来获取数据（计算属性）
        mutations: {}, // 用来修改数据的（相当于function，同步）
        actions: {},   // 用来提交mutation（异步）
        modules: {}    // 模块化
      });

   2. main.js中将vuex实例应用并挂载到vue对象上
      文件路径：项目/src/main.js

      import Vue from "vue";
      import App from "./App.vue";
      import router from "./router";
      import store from "./store"; // 引用vuex
      
      new Vue({
        router,
        store,
        render: h => h(App)
      }).$mount("#app");

       

3. 实战代码

   1. 简单实现count++ 使用到state,mutations

      src/store/index.js

      import Vue from "vue";
        import Vuex from "vuex";
      
        Vue.use(Vuex);
      
        export default new Vuex.Store({
          state: {
            count: 0,
          },     // 数据仓库（数据的唯一来源）
          mutations: {
            countChange(state) {
              state.conut++
            }
          }, // 用来修改数据的（相当于function，同步）
        });

      src/main.js内容同上2.2。

      src/app.vue

      <template>
          <div id="app">
            <h1>count:{{ this.$store.state.count }}</h1>
            <button @click="contChangeF">点击count+1</button>
          </div>
        </template>
      
        <script>
        export default {
          name: "app",
          methods: {
            contChangeF() {
              this.$store.commit('countChange'); // 调用mutations中countChange方法，来修改数据。
            }
          }
        }
        </script>

       拓展：使用commit第二个参数，通过赋值实现上述功能。

      src/store/index.js

      import Vue from "vue";
        import Vuex from "vuex";
      
        Vue.use(Vuex);
      
        export default new Vuex.Store({
          state: {
            count: 0,
          },     // 数据仓库（数据的唯一来源）
          mutations: {
            countChange(state, data) {
              state.conut = data;
            }
          }, // 用来修改数据的（相当于function，同步）
        });

      src/main.js内容同上2.2。

      src/app.vue

      <template>
          <div id="app">
            <h1>count:{{ this.$store.state.count }}</h1>
            <button @click="contChangeF">点击count+1</button>
          </div>
        </template>
      
        <script>
        export default {
          name: "app",
          methods: {
            contChangeF() {
              var v = this.$store.state.count++;
              this.$store.commit('countChange',v); // 调用mutations中countChange方法，来修改数据。
            }
          }
        }
        </script>

   2. 进阶实战-用户登录及权限控制