Vuex总结

简介

简单来讲：共享的状态管理器，比如你想修改某些背景色，设备状态、cookie等信息的时候你可以考虑用它。其他的当跨页面共享数据的时候也可以考虑用它。其他的自己去看官网、所有的API参考

State单一状态树

用来存储数据的，相当于一个变量（支持json对象、数组、字符串等），相当于数据源。

获取state中的状态值可以通过直接找或者通过getter方式

//方式一
this.$store.state.test.phone.name

//方式二
this.$store.getters.phone

Getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter可以在组件的computed的时候通过get方法进行获取。以及触发Mutation中的方法进行修改。

  computed: {
    company: {
      get() {
        return this.$store.state.test.company;
      },
      set(value) {
        this.$store.commit("CHANGE_COMPANY", value);
      }
    }

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。它是同步的。

在页面可以直接用commit的方式触发其中的方法。

this.$store.commit("CHANGE_COMPANY", value);

Action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

Action可以通过dispatch来触发。

   this.$store.dispatch('toggleDevice',this.company)

所有整合

主配置index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import test from './modules/test'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        test
    },
    getters
  })

store中的某个模块 test.js

const test = {
    state: {
        phone: {
            name: 'xiaomi',
            price: 3000
        },
        company: 'xm'
    },
    mutations: {
        CHANGE_PHONE: (state, device) => {
            console.log("CHANGE_PHONE = device:"+device)
            if (device == 'hw') {
                state.phone.price = state.phone.price + 1000
                state.phone.name = 'huawei'
                state.phone.company == 'hw'
            } else {
                state.phone.price = state.phone.price - 1000
                state.phone.name = 'xiaomi'
                state.phone.company == 'xm'
            }
            
        },
        CHANGE_COMPANY: (state, device) => {
            console.log("CHANGE_COMPANY = device:"+device)
            state.phone.company == device
          
            
        },
    },
    actions: {
        toggleDevice({ commit }, device) {
            console.log("device:"+device)
            commit('CHANGE_PHONE', device)
        },
        toggleCompany({ commit }, device) {
            console.log("device:"+device)
            commit('CHANGE_COMPANY', device)
        }

    }
}

export default test

getter.js

const getters = {
    phone: state => state.test.phone
  }
  export default getters
  

页面模板调用index.vue

<template>
  <div>
    这是一个layout{{userame}}
    <input v-model="company">
    <a @click="handleLogin">点击我</a>
  </div>
</template>

<script>
import { getTest } from "@/api/login";

export default {
  name: "Layout",
  data() {
    return {
      userame: this.$store.state.test.phone.name
    };
  },
  computed: {
    company: {
      get() {
        return this.$store.state.test.company;
      },
      set(value) {
        this.$store.commit("CHANGE_COMPANY", value);
      }
    }
  },
  methods: {
    handleLogin() {
      console.log("xxxxxxxxxxxxxxxx=="+this.company);
      console.log(this.$store.getters.phone);
    //   this.$store.commit("CHANGE_PHONE", this.$store.state.test.company);
      this.$store.dispatch('toggleDevice',this.company)
      console.log(this.$store.getters.phone);
      // getTest(this.userame).then(response => {
      //     alert(response.data);
      //      this.$store.dispatch('increment')
      // })
    }
  }
};
</script>

其他知识

• 1. 项目的结构：https://vuex.vuejs.org/zh/guide/structure.html
• 2. 表单的处理，关于store与表单元素双向绑定的实现：https://vuex.vuejs.org/zh/guide/forms.html
• 3. 严格模式：https://vuex.vuejs.org/zh/guide/strict.html