VueX的state、mutations、actions、getters的学习

Vuex 概述

1. 官方文档：https://vuex.vuejs.org/zh/
   Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状
   态，并以相应的规则保证状态以一种可预测的方式发生变化。
2. Vuex简单理解：
   Vue 应用中的每个组件在 data() 中封装着自己数据属性，而这些 data 属性都是私有的，完全隔离的。
   如果我们希望多个组件都能读取到同一状态数据属性，或者不同组件的行为需要更新同一状态数据属
   性，
   这就需要一个将共享的状态数据属性进行集中式的管理。
   这就是 Vuex 状态管理所要解决的问题。

安装vuex

npm install --save vuex

main.js中引入Vuex

// 默认导入的是./store/index.js
import store from ‘./store’

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// 默认导入的是./store/index.js
import store from './store'

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

配置VueX

在src下面创建一个store的文件夹，下面创建index.js文件
格式如下

import Vue from 'vue'
import Vuex from 'vuex'
// 引用Vuex插件
Vue.use(Vuex)
// 创建一个仓库存储状态
const store = new Vuex.Store({
    state: {//存放状态，（共享属性）
    },
    // mutations中定义方法可以改变状态值
    // mutations一般用于赋值
    mutations: {
    },
    // 一般在action里面写逻辑运算
    actions: {
    },
    // getters派生属性，
    // 相当于当state里面的count发生变化，他的值也随着发生变化
    getters: {
        }
    } 
})
// 将这个对象导出
export default store

1、引入vue和vuex

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

2、使用Vuex这个插件

// 引用Vuex插件
Vue.use(Vuex)

3、state属性

state的作用是存储数据，并多组件共享,

  state: {//存放状态，（共享属性）
        count: 1
    },

组件中的state的引用方法如下，这样就能拿到vuex中存储的数据

   <div>count:{{$store.state.count}}</div>

4.mutations属性
mutations一般用于给state中的数据，赋值使用

mutations: {
        // 改变state中的状态值
        increment(state, n) {
            // 自增长
            state.count += n
        },
        decrement(state) {
            // 自减
            state.count--
        }

    },

在页面调用mutations中的方法，采用 this.$store.commit(‘方法名’)这样的方式调用，

  <button @click="add">加法</button>
  <button @click="jian">减法</button>

 add() {
      //  获取下状态值
      console.log(this.$store.state.home.count);
      this.$store.commit('increment',10)
    },
    jian() {
     this.$store.commit('decrement')
    }

5.actions属性
action一般是属于计算属性，里面写逻辑运算，

   // 一般在action里面写逻辑运算
    actions: {
        addActions(context, n) {
            // 触发mutations里面的increment方法
            context.commit('increment', n)
        },
        // 可以采用{}的方式传入两个参数 commit和state
        decrementActions({ commit, state }) {
            console.log('action state.count:', state.count)
            commit('decrement')
        }

    },

在组件中的引用方法如下 this.$store.dispatch(“方法名”);

 <button @click="add">加法</button>
 <button @click="jian">减法</button>

 methods: {
    add() {
      //  获取下状态值
      console.log(this.$store.state.home.count);
      // this.$store.commit('increment',10)
      // 调用action里面的方法
      this.$store.dispatch("addActions", 10);
    },
    jian() {
      // this.$store.commit('decrement')
      this.$store.dispatch("decrementActions");
    }
  }

6、getters
getters派生属性， 相当于当state里面的count发生变化，他的值也随着发生变化，如下所示，监听state中的count值的变化，当变化达到哪里，返回结果也发生变化。

 getters: {
        desc(state) {
            if (state.count < 50) {
                return '吃饭'
            }
            else if (state.count < 100) {
                return '睡觉'
            }
            else {
                return '打豆豆'
            }
        }
    }

getters 派生属性的使用方法：{{$store.getters.desc}}

Module模块化项目结构

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter 等，参见以下代码模型

在store文件夹下面新建一个文件夹modules用于存放小模块js的 state、mutation、action、getter 等
这样能减少代码的冗余量，如果项目过大，这样结构也比较清晰。

modules文件夹下面的js结构如下

const state={

}
const getters={

}
const mutations={

}
const actions={

}
export default{
    state,
    getters,
    mutations,
    actions
}

以上面为列，将上面的state mutations,actions,getters抽出来集成一个home.js文件
如下所示

const state = {
    count: 1
}
// getters派生属性，
// 相当于当state里面的count发生变化，他的值也随着发生变化
const getters = {
    desc(state) {
        if (state.count < 50) {
            return '吃饭'
        }
        else if (state.count < 100) {
            return '睡觉'
        }
        else {
            return '打豆豆'
        }

    }
}
const mutations = {
    // 改变state中的状态值
    increment(state, n) {
        // 自增长 
        state.count += n
    },
    decrement(state) {
        // 自减
        state.count--
    }
}
const actions = {
    addActions(context, n) {
        // 触发mutations里面的increment方法
        context.commit('increment', n)
    },
    // 可以采用{}的方式传入两个参数 commit和state
    decrementActions({ commit, state }) {
        console.log('action state.count:', state.count)
        commit('decrement')
    }
}

export default{
    state,
    getters,
    mutations,
    actions
}

在store文件夹下面的index.js引入home.js

import home from './modules/home'

并且引入module 将组件引入

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

import home from './modules/home'
import good from './modules/good'
// 引用Vuex插件
Vue.use(Vuex)
// 创建一个仓库存储状态
const store = new Vuex.Store({
    modules:{
        home,
        good,
    }
})
// 将这个对象导出
export default store

外面引入数据方式发生改动
由

    <div>count:{{$store.state.count}}</div>

改动成

    <div>count:{{$store.state.home.count}}</div>