Vuex初始用

一. 什么是Vuex

 

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

1.1状态管理到底是什么

简单理解成需要多个组件共享的变量全部存储在一个对象里面，响应式的公共组件

单页面

二. 在vue里面安装及使用Vuex

通过代码 npm install vuex  --save安装

在src新建一个仓库 store，在文件store里新建一格index.js

配置环境 引入 安装 导出

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

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

// 2.创建对象
const store = new Vuex.Store({
  state: {
    counter: 100
  },
  mutations: {
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    }
  }
})

// 3.导出store
export default store

在main.vue里接收，注册

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

使用

<template>
  <div id="app">
    <h2>{{$store.state.counter}}</h2>
    <button @click = "add">+</button>
    <button @click = "ajj">-</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    add(){
      this.$store.commit('increment');
    },
    ajj(){
      this.$store.commit('decrement');
    }
  }
}
</script>

<style>

</style>

 2.2 在浏览器里安装devtools插件监听

 多页面只有通过Mutation修改vuex浏览器里的devtools插件才能监听

2.3 vuex 有几个比较核心的概念

state

mutations

getters

actions

modeles

        State  单一状态树 所有数据存放在其中，便于维护

        getters 相当于compoted计算，可传参

  getters: {
    more20stu(state){
      return state.students.filter(s => s.age > 20)
    },
//可调用getters里的其他方法
    morestulength(state,getters){
      return getters.more20stu.length
    },
//可传参数
    more28stu(state){
      return age => {
        return state.students.filter(s => s.age >age )
      }
    }
  },

其中age是传过来的    <h2>{{$store.getters.more28stu(28)}}</h2>

也可把getters单做参数，调用getters里的方法

在mutation 操作修改，state才可以被浏览器的插件监听

mutation传参

       在组件内绑定好方法，通过this.$store.commit(方法，参数)传过去

在store里里接收

    crement(state,count){
      state.counter += count
    },

2.第二种传参方式 传对象

    crement(count){
      // 第一种提交方式
      // this.$store.commit('crement',count)

      // 第二种提交方式
       this.$store.commit({
         type: 'crement',
         count
       })
    },

 在mutation接收

    crement(state,payload){
      state.counter += payload.count
      console.log(payload);
    },

.mutation的响应规则（在mutation修改对象时）只能用Vue.set 或者Vue.delete

    adddata(state){
      Vue.set(state.info,'address', '老司机');
      // Vue.delete(state.info, 'age');
    }

mutation常量 新建一个mutation-patys.js的文件

   设置常量

export const INCREMENT = 'increment'
export const DEINCREMENT = 'decrement'

引入文件

import {INCREMENT} from "./store/mutation-types"
import {DEINCREMENT} from "./store/mutation-types"
  methods: {
    add(){
      this.$store.commit(INCREMENT);
    },
    ajj(){
      this.$store.commit(DEINCREMENT);
    },
        }

  mutations: {
    [INCREMENT](state){
      state.counter++
    },
    [DEINCREMENT](state){
      state.counter--
    },
}

mutation只能进行同步任务，异步任务在actions进行

通过this.$store.dispeach()把信息传送到actions里

    updateInfo(){
      this.$store.dispatch('updateInfo', '我是payload');
    }

在actions把接收到的数据传到mutation里解决mutation里不能异步的问题

  actions: {
    // context上下文
    updateInfo(context,payload){
      setTimeout(() => {
        context.commit('updateInfo')
        console.log(payload);
      },1000)
    }
  }

modules 模块解决state单一状态臃肿

创建多个模块解决state臃肿

使用在实例化的store里输出下面代码

  modules:{
    a: modulesA,
  }

在实例化外创建modulesA

const modulesA = {
  state: {
    name: 'zhangshang'
  },
  mutations:{
    updateName(state,payload){
      state.name = payload
    }
  },
  getters:{
    fullname(state) {
      return state.name + '111'
    }
  },
  actions:{
    aUpdateName(context,payload) {
      console.log(context);
      setTimeout(() => {
        context.commit('updateName','wangwu')
      })
    }
  },
}

注意注意当有异步时，不能直接传给mutations，先通过dispatch传给actions，

在通过actions的context.commit传给mutations才会被浏览器插件监听

store里的index太繁杂时可把mutations，getters，actions， moudles封装成一个个js文件，引入index.js即可