vuex概念说明和引用

1. vuex是什么

	github站点: https://github.com/vuejs/vuex
	在线文档: https://vuex.vuejs.org/zh-cn/
	简单来说: 对应用中组件的状态进行集中式的管理(读/写)

2. 状态自管理应用

	state: 驱动应用的数据源
	view: 以声明方式将state映射到视图
	actions: 响应在view上的用户输入导致的状态变化(包含n个更新状态的方法)

3. 多组件共享状态的问题

多个视图依赖于同一状态
来自不同视图的行为需要变更同一状态
以前的解决办法
	* 将数据以及操作数据的行为都定义在父组件
	* 将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)
vuex就是用来解决这个问题的

4. vuex的核心概念

1). state

vuex管理的状态对象 单一状态树
英文名称是Single Source of Truth，也可以翻译成单一数据源。
它应该是唯一的
const state = {
	xxx: initValue
}

2). mutations

包含多个直接更新state的方法(回调函数)的对象
谁来触发: action中的commit('mutation名称')
只能包含同步函数，同步的代码, 不能写异步代码 
const mutations = {
	yyy (state, data) { 
		// 更新state的某个属性
	}
}

3). actions

包含多个事件回调函数的对象
通过执行: commit()来触发mutation的调用, 间接更新state
谁来触发: 组件中: $store.dispatch('action名称')  // 'zzz'
可以包含异步代码(定时器, ajax)
const actions = {
	zzz ({commit, state}, data1) {
		commit('yyy', data2)
	}
}

4). getters

包含多个计算属性(get)的对象
谁来读取: 组件中: $store.getters.xxx
const getters = {
	mmm (state) {
		return ...
	}
}

5). modules

包含多个module
一个module是一个store的配置对象
与一个组件(包含有共享数据)对应

6). 向外暴露store对象

export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters
})

7). 组件中: mapGetters, mapActions

import {mapGetters, mapActions} from 'vuex'
export default {
	computed: mapGetters(['mmm'])
	methods: mapActions(['zzz'])
}

{{mmm}} @click="zzz(data)"

8). 映射store

import store from './store'
new Vue({
	store
})

9). store对象

1.所有用vuex管理的组件中都多了一个属性$store, 它就是一个store对象
2.属性:
  state: 注册的state对象
  getters: 注册的getters对象
3.方法:
  dispatch(actionName, data): 分发action 

5. 将vuex引到项目中

1). 下载: npm install vuex --save

2). 使用vuex

1.store.js
	import Vuex from 'vuex'
	export default new Vuex.Store({
		state,
		mutations,
		actions,
		getters,
		modules
	})
	
2.main.js
	import store from './store.js'
	new Vue({
		store
	})

6.应用

用户的登录状态、用户名称、头像、地理位置信息
商品的收藏、购物车中的物品
这些状态信息，放到统一一个地方，用于多个状态，多个页面之间的共享，对它进行保存和管理

代码如下

// store 中 index.js
import Vue from 'vue'
import Vuex from 'vuex'

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

// 2、创建对象
const store = new Vuex.Store({
  state: {
    count: 100,
    student: [{
      id: 100,
      name: 'fqniu',
      age: 18
    }, {
      id: 101,
      name: 'niuniu',
      age: 25
    }, {
      id: 102,
      name: 'xiaoniu',
      age: 90
    }, {
      id: 103,
      name: 'niu.sir',
      age: 12
    }],
    // 这些属性都会被加入到响应式系统中,而响应式系统会监听属性的变化当属性发生变化时,
    // 会通知所有界面中用到该属性的地方,让界面发生刷新
    info: {
      name: 'ergou',
      age: 24,
      height: 173
    }
  },

  mutations: {
    // 方法
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
    addStudent(state, stu) {
      state.student.push(stu)
    },
    updateInfo(state) {
      state.info.name = 'fqniu'
    }
  },

  actions: {
    // context 上下文  注意不能绕过 mutations 修改数据
    // payload 传递的参数
    aupdateInfo(context, payload) {
      return new Promise((resolve) => {
        setTimeout(() => {
          context.commmit('updateInfo', payload)
          // 成功的回调，告诉一秒后更改成功
          console.log(payload.message)
          payload.success()
          resolve()
        }, 1000);
      })
    }
    // 或者
    aupdateInfo({commit}, payload) {
      return new Promise((resolve) => {
        setTimeout(() => {
          commmit('updateInfo', payload)
          // 成功的回调，告诉一秒后更改成功
          console.log(payload.message)
          payload.success()
          resolve()
        }, 1000);
      })
    }
  },

  getters: {
    // 定义getters 当我们从store拿某一个数据时，这个数据是经过变化后才给使用的，
    // 这种情况来定义getters来进行变化，让别人直接拿getters使用
    powerCount(state) {
      return state.count * state.count
    },
    more20stu(state) {
      return state.student.filter(s => s.age > 20)
    },
    // 通过上面那个getters 可以直接拿来使用 参数有两个，其中参数中第二个getters(名字可以给其他的) 就是定义的getters 
    more20stulength(state, getters) {
      return getters.more20stu.length
    },
    // 获取年龄大于age的学生，不能把数据写死。
    moreAgestu(state) {
      // return function (age) {
      //   return state.student.filter(s => s.age > age)
      // }
      return age => {
        state.student.filter(s => s.age > age)
      }
    }
  },

  modules: {},
})

export default store

// App.vue
<template>
  <div id="app">
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <h2>{{$store.state.count}}</h2>
    <button @click="addStudent">添加</button>

    <!-- app内容 getter相关信息 -->
    <h2>{{$store.getters.powerCount}}</h2>
    <h2>{{$store.getters.more20stu}}</h2>
    <h2>{{$store.getters.more20stulength}}</h2>
    <h2>{{$store.getters.moreAgestu(12)}}</h2>

    <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  data() {
    return {
      // count: 0,
    };
  },
  components: {
    HelloWorld,
  },
  methods: {
    addition() {
      this.$store.commit("increment");
    },
    subtraction() {
      this.$store.commit("decrement");
    },
    addStudent() {
      // payload:负载
      const stu = { id: 114, name: "ergou", age: 19 };
      this.$store.commit("addStudent", stu);
    },
    // actions 里面的异步操作
    updateInfo() {
      // 第一种
      // 传递的参数是对象
      // this.$store.dispatch("aupdateInfo", {
      //   message: "我是携带的信息",
      //   success: () => {
      //     console.log("里面已经完成");
      //   },
      // });
      // 第二种 promise 异步
      this.$store
      .dispatch("aupdateInfo","我是携带的信息")
      .then(res=>{
        console.log("里面已经完成");
        console.log(res)
      })
    },
  },
};
</script>

<style>
</style>

补充：

state