Vuex实战-优快云博客

在学习网上其他大佬的经验并自己尝试了一遍后：juejin.im/post/5c91fb…

就打算开始自己啃官网原文档了：vuex.vuejs.org/zh/installa…

因为经过了初步的了解，所以本文只是针对官网的例子进行实现，并加以备注（官网写的很详细了，但有些还是没有完全写出来）

在 store 文件夹引入（使用modules）

代码位置：src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import simpleMudule from './modules/simple'
// 使用modules将store抽离
export default new Vuex.Store({
  modules: {
    simpleMudule
  }
})
复制代码

modules文件

代码位置：src/store/modules/simple.js

import { SOME_MUTATION } from '../mutation-types' //mutations 常量分离

export default {
  namespaced: true, // 单独命名空间，默认情况下， action、mutation 和 getter是注册在全局命名空间的，此外，modules文件中，namespaced加和不加都不改变内容，不加namespaced直接删除就好
  state: {
    name: 'oldName',
    count: 1,
    otherName: '1111',
    todos: [{
        id: 1,
        text: '...',
        done: true
      },
      {
        id: 2,
        text: '...',
        done: false
      },
    ]
  },
  getters: {
    // 可采用箭头函数
    getReverseName(state) {
      return state.name.split('').reverse().join('')
    },
    doneTodos: state => {
      return state.todos.filter(item => item.done) // 筛选为true的值
    },
    // 可接受其他getters
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    },
    // 可传参
    getTodoId: (state) => (id) => {
      return state.todos.find(item => item.id === id) // 返回传入id的值
    }
  },
  mutations: {
    updateName(state) {
      state.name = 'newName'
    },
    // 可传参
    increment(state, n) {
      state.count += n
    },
    // 这个就用到了 mutations的常量
    [SOME_MUTATION](state) {
      state.otherName = state.otherName == 'change name' ? '1111' : 'change name'
    }
  },
  actions: {
    updateNameAction({ commit }) {
      commit('updateName')
    },
    // n是传参，这一步官网没写详细
    incrementAsync({ commit },n) {
      setTimeout(() => {
        commit('increment',n)
      }, 1000);
    },
  }
}

复制代码

modules 常量文件

位置：src/store/mutation-types.js

export const SOME_MUTATION = 'SOME_MUTATION'
复制代码

使用vuex

因为我把官网的所有例子都写一起，或许会有点乱，具体看注释就好

位置：src/pages/other/vuexText/Simple.vue

<template>
  <div class="simple-contain">
    <p>name1:{{getName}}</p>
    <p>name2:{{newName}}</p>
    <p>name3:{{nameAlias}}</p>
    <p>name4:{{namePlusLocalState}}</p>
    <p>todo:{{todoList}}</p>
    <p>todoLength:{{todoLength}}</p>
    <p>todoFind:{{todoFind}}</p>
    <p>doneTodos:{{doneTodos1}}</p>
    <p>doneTodosCount:{{doneTodosCount1}}</p>
    <p>getTodoId:{{getTodoId1(2)}}</p>
    <el-button @click="increment(10)">{{count}}</el-button>
    <el-button @click="SOME_MUTATION">{{otherName}}</el-button>
    <el-button @click="incrementAsync(10)">{{count}}</el-button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      age: "18"
    };
  },
  computed: {
    // 普通方式触发
    getName() {
      return this.$store.state.simpleMudule.name;
    },
    // 使用辅助函数触发
    ...mapState("simpleMudule", { // simpleMudule 是因为使用了命名空间，否则直接 ...mapState({})就可以
      // 注释的这三种是使用state，并且在没有命名空间下的不同写法。state默认不是全局，所以要加上simpleMudule
      // newName(){
      //   return this.$store.state.simpleMudule.name
      // },
      // newName(state){
      //   return state.simpleMudule.name
      // },
      // newName: state => state.simpleMudule.name,
      
      // 命名空间下的state直接使用state.name
      newName: state => state.name,
      
      nameAlias: "name",
      
      namePlusLocalState(state) {
        return state.name + this.age;
      },

      todoList() {
        // return this.$store.getters.doneTodos; // 全局写法
        return this.$store.getters["simpleMudule/doneTodos"]; // 命名空间写法
      },

      todoLength() {
        // return this.$store.getters.doneTodosCount;
        return this.$store.getters["simpleMudule/doneTodosCount"];
      },
      todoFind() {
        // return this.$store.getters.getTodoId(2);
        return this.$store.getters["simpleMudule/getTodoId"](2);
      },

      // count: state => state.simpleMudule.count,
      // otherName: state => state.simpleMudule.otherName

      count: state => state.count,
      otherName: state => state.otherName
    }),
    // 辅助函数的两种写法，一种直接调用，使用modules里的函数名，另一种自定义方法名称
    // ...mapGetters([
    //   'doneTodos',
    //   'doneTodosCount',
    //   'getTodoId'
    // ])
    ...mapGetters({
      // 全局 和 命名空间 的不同写法
      // doneTodos1: "doneTodos",
      // doneTodosCount1: "doneTodosCount",
      // getTodoId1: "getTodoId"
      
      doneTodos1: "simpleMudule/doneTodos",
      doneTodosCount1: "simpleMudule/doneTodosCount",
      getTodoId1: "simpleMudule/getTodoId"
    })
  },
  methods: {

    // ...mapMutations({
    //   add: "increment",
    //   changeName: "SOME_MUTATION"
    // })
    // ...mapMutations(["increment", "SOME_MUTATION"]),
    // ...mapActions(["incrementAsync"]),
    
    // 命名空间的写法
    ...mapMutations('simpleMudule',["increment", "SOME_MUTATION"]),
    ...mapActions('simpleMudule',["incrementAsync"])
  }
};
</script>
<style lang="less">
.simple-contain {
  margin: 50px;
}
</style>
复制代码