vuex的5个核心内容

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.use(Vuex) //注册Vuex的功能  Vue.use的方法实际上时调用了Vuex中的一个install的方法(Vue.use(Router)同理)
const store = new Vuex.Store({
  //实例化Vuex的构造参数 state mutations actions
  state: {
    //存储的状态
    count: 0,
    // 有时候我们需要从state中派生出一些状态,这些状态依赖于state,类似于计算属性
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  getters: {
    // 放置的第一个参数就是当前store的state
    filterList: state => state.list.filter(item => item > 5),
    // 快捷访问modules
    token: state => state.user.token,
    name: state => state.setting.name,
  },
  // 修改state的必须通过mutations
  mutations: {
    //定义修改state的mutaions方法；
    // state指的是当前vuex中state独像;payload载荷提交mutations的方法的时候传递的参数 它可以是任何形式的值。
    addCount(state, payload) {
      state.count += payload
    }
  },
  // 异步动作
  // 从后端获取一个数 更新到state的count中
  actions: {
    // 做异步的请求
    // 模拟异步操作
    // action方法
    // 第一个参数 执行的上下文对象 context 相当于组件中的this.$store store的实例
    // 第二个参数是params
    getAsyncCount(context, params) {
      setTimeout(() => {
        // 获取一个值 相当于this.$store.commit(mutaion方法,payload)
        context.commit('addCount', params)
      }, 1000);
    }
  },
  // 所有的数据,更新,操作都在一起,项目越大,越难维护
  // 模块内部的mutation、action和getter是注册在全局命名空间的--使得多个模块能够对同一mutation或action做出响应
  // namespaced就是给子模块加个锁
  modules: {
    // 放置子模块的属性
    // 会报[vuex] unknown mutation type: updateToken
    // 但是可以采用路径形式调用
    // 1.直接调用-带上模块的属性名路径
    // 2.辅助函数--带上模块的属性名路径
    // 3.createBundleRendererNamespaceHelpers创建基于某个命名空间辅助函数
    user: {
      namespaced: true,
      state: {
        token: '12345'
      },
      mutations: {
        updateToken(state, payload) {
          state.token = '67890'
        }
      }
    },
    setting: {
      state: {
        name: 'vuex实例'
      }
    }
  }
})//实例化一个Vuex
new Vue({
  render: h => h(App),
  router,
  store,
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <!-- 1.原始形式应用 -->
    <!-- this.$store可以获得store实例 -->
    <div>原始形式应用:{{ $store.state.count }}</div>
    <!-- 2.计算属性 -->
    <div>计算属性状态:{{ count }}</div>
    <!-- 3.辅助函数 -->
    <div>辅助函数:{{ count }}</div>
    <test-a></test-a>
    <test-b></test-b>
  </div>
</template>

<script>
import { mapState } from "vuex";
import TestA from "./components/TestA.vue";
import TestB from "./components/TestB.vue";
export default {
  name: "App",
  components: {
    TestA,
    TestB
  },
  methods: {},
  computed: {
    count() {
      return this.$store.state.count;
    },
    // mapState(['count'])得到的最终是类似上述代码
    // 利用拓展运算符将导出的状态映射给组件的计算属性
    ...mapState(["count"]),
  },
};
</script>

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

TestA.vue

<template>
  <div>
    <!-- vue中方法的默认第一个参数 事件参数对象 -->
    <!-- 事件参数对象 $event -->
    <button @click="test">+5(原始形式)</button>
    <button @click="addCount(100)">+100(辅助函数)</button>
    <button @click="test1">异步调用(原始形式)</button>
    <button @click="getAsyncCount(222)">异步调用(辅助函数)</button>
    <div>原始形式getters:{{ $store.getters.filterList }}</div>
    <div>辅助形式getters:{{ $store.getters.filterList }}</div>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
export default {
  name: "testA",
  computed: {
    ...mapGetters(["filterList"]),
  },
  methods: {
    test() {
      // 1.this.$store可以获得store实例
      // 调用mutation方法 提交mutarion
      // commit(mutation名称,payload)
      this.$store.commit("addCount", 5);
    },
    // 2.mapMutations(['addCount'])得到的最终是类似上述代码
    // 利用拓展运算符将导出的状态映射给组件的方法
    ...mapMutations(["addCount"]), //此时组件方法中就会拥有一个对应的addCount方法
    test1() {
      // 3.原始形式
      // commit是提交mutations
      // dispatch是分发actions  dispatch(actions名称)
      this.$store.dispatch("getAsyncCount", 111);
    },
    // 3.mapActions(['getAsyncCount'])得到的最终是类似上述代码
    // 利用拓展运算符将导出的状态映射给组件的方法
    ...mapActions(["getAsyncCount"]), //此时组件方法中就会拥有一个对应的addCount方法
  },
};
</script>

TestB.vue

<template>
  <div>
    <!-- $store.state.子模块.属性 -->
    <div>token:{{ $store.state.user.token }}</div>
    <div>name:{{ $store.state.setting.name }}</div>
    <div>快捷访问子模块状态</div>
    <div>{{ token }}</div>
    <div>{{ name }}</div>
    <div>快捷访问子模块mutaion</div>
    <button @click="updateToken('67890')">更新token</button>
    <!-- <button @click="test">更新token</button> -->
  </div>
</template>

<script>
import { mapGetters, createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("user");
export default {
  name: "testB",
  computed: {
    ...mapGetters(["token", "name"]),
  },
  methods: {
    // updateToken() {
    //   this.$store.commit("updateToken");
    // },
    ...mapMutations(["updateToken"]),
    // updateToken() {
    //     // 采用路径形式调用
    //   this.$store.commit("user/updateToken");
    // },
    // ...mapMutations(["user/updateToken"]),
    // test() {
    //   this["user/updateToken"]();
    // },
  },
};
</script>

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