Vue学习(9)-vuex

一、vuex的基本使用

Store\index.js

import Vue from 'vue'
import Vuex from 'vuex'

//安装插件
Vue.use(Vuex)

// 创建对象
export default new Vuex.Store({
  state: {
    //
    counter: 1000
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

Mutations

mutation是用来追踪状态变化，可在devtools里查看

//index.js

 mutations: {
    //方法
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  },

//App.vue
<template>
		<button @click="addition">+</button>
    <button @click="subtraction">-</button>
</template>

<script>    
    methods: {
      addition() {
        this.$store.commit('increment')
      },
      subtraction() {
        this.$store.commit('decrement')
      }
    }
</script>    

Mutation可以携带参数传参

//.vue
<button @click="addCount(5)">+5</button>
<button @click="addStu">++</button>

			addCount(count) {
        //Payload载荷
        this.$store.commit('incrementCount', count)
      },
      addStu() {
        const stu = {id: 3, text: '...', done: false}
        this.$store.commit('incrementStu', stu)
      },
			addCount2(count) {
        this.$store.commit({
          type: 'incrementCount2',
          count
        })

    incrementCount(state, count) {
      state.counter += count
    },
    incrementStu(state, stu) {
      state.todos.push(stu)
    }
		//另一种提交风格
		incrementCount2(state, payload) {
      state.counter += payload.count
    }

Mutations中必须是同步操作，异步的话devtool会无法追踪，就要用到action

Getters

可以认为是 store 的计算属性

state: {
    counter: 1000,
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false },
      { id: 3, text: '...', done: false }
    ]
  },
getters: {
    //对state中数据进行处理
    powerTodos(state) {
      return state.todos.filter(s => s.id >1)
    },
    //还可同时调用getters里的数据
    doneTodos(state, getters) {
      return getters.powerTodos.length
    },
    //想要在网页通过传来的数进行处理
    cutTodos(state) {
      return function (id) {
        return state.todos.filter(s => s.id > id)
      }
    }
  },   

//.vue
<div>    
    <h2>{{$store.getters.powerTodos}}</h2>
    <h2>{{$store.getters.doneTodos}}</h2>
    <h2>{{$store.getters.cutTodos(2)}}</h2>
</div>

vuex的数据响应原理

changeInfo() {
        this.$store.commit('updateInfo')
      }

updateInfo(state) {
      //注释掉的是非响应式的
      // state.info.id = '6'
      Vue.set(state.info, 'id', '6')

      // delete state.info.id
      Vue.delete(state.info, 'id')
    }

Actions

Action 类似于 mutation，不同在于：

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

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

//.vue
 updateInfo() {
        this.$store
            .dispatch('a_update', 'news')
            .then(res => {
              console.log(res);
            })
      }

//index.js
actions: {
    a_update(context, payload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('updateInfo');
          console.log(payload);
          resolve('111')
        }, 1000)
      })
    }
  },

Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

为了方便管理，可以将各个功能抽离，在导入会store中。

主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1