Vuex

总结

getter	state	mutations	actions
类似 computed 可以根据state计算出值，并根据 state 响应	相当于data	相当于methods	做数据请求，发送给methods
this.$store.getter	this.$store.state	通过 this.$store.commit() 触发 函数内可以接受对象或字符串 https://vuex.vuejs.org/zh/guide/mutations.html
	this.$emit('父自定义事件名')类似

最好提前在你的 store 中初始化好所有所需属性
当需要在对象上添加新属性时，你应该使用
Vue.set(obj, 'newProp', 123)
或者以新对象替换老对象。例如，利用对象展开运算符我们可以这样写：
state.obj = { ...state.obj, newProp: 123 }

1. 在组件内需要获取数据时

import { mapGetters, mapActions } from "vuex";
export default {
...
  methods: {
    ...mapActions(["getHomeData"])  数组里是action
  },
  computed: {
    ...mapGetters(["homeData"])
  }
  
  然后在created钩子内请求
  created(){
    this.getHomeData()  这个触发 action。action触发mutations，mutations改变state。
    但是这些都是异步的，所以你在 this.getHomeData() 后访问新的数据还是空。
  }
  解决办法：
  watch: {
    homeData(newValue, oldValue) {
     在watch中赋值当前组件的data为 state内的新数据
      this.listsData={...this.homeData}
    }
  },
}

2. 在vuex中，通过this.$store.state可以直接访问到state中的数据，但是如果这种操作过多，存在修改数据混乱，不能快速定位到错误的位置。

---

介绍

Vuex 是 vue 的状态管理工具，它的主要功能是实现多组件间的状态共享。它由一个集中式的存储仓库管理状态，类比本地存储，数据库。我们可以将数据放在 store 的 state 中，实现共享。

组成

1. state 状态
2. action 动作(业务交互：用户交互和数据交互)
3. mutation 修改state
4. getter 计算属性
5. store Vuex 实例存储者

起步

1. npm i vuex -S
2. src 文件下打造 store 目录
3. main.js 引入 Vuex 实例

store 目录结构

-index.js
-state.js
-aciton.js
-mutation.js
-getter.js

main.js

import store from './store'
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import State from './State'
import Actions from './Actions'
import Mutations from './Mutations'
import Getters from './Getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 属性名除 State 外必须 +s
  State,
  Actions,
  Mutations,
  Getters,
})
export default store

state.js

this.$store.state || mapState

const State = {
  ...
}
export default State

import { mapState } from 'vuex'

computed: { ...mapState(['count']) }

修改 State

注意，以下操作虽然可以直接改变 state，但这是明确被禁止的
Vue 中不能在组件中直接操作原型上的 state

this.$store.state.count++

---

action.js

aciton与mutation之间的沟通通过commit方法进行，其中的aciton对象有两个属性分别是type和payload。其中type必须为一个大写的const常量，安全性高。

import * as type from './type'
const actions ={
	/*
	commit: ƒ boundCommit(type, payload, options)
	dispatch: ƒ boundDispatch(type, payload)
	getters: {}
	rootGetters: {}
	rootState: {__ob__: Observer}
	state: {__ob__: Observer}
	__proto__: Object
	*/
  increment({ commit }, payload) {
  	这里第一个参数为一个'精简版'的 store 对象，结构赋值获取 commit 方法，上边注释就是这个对象。
    let action={
      type:type.INCREMENT,
      payload
    }
    commit(action)
  }
}
export default actions

---

mutation.js

1. mutations 也是一个对象，用来修改 state 中数据。
2. mutations 中的方法用常量来表示
3. 方法中的参数分别为 state 和 action，分别对应store 中的 state 和 actions 方法中的 action 对象

import * as type from './type'
const mutations = {
  [type.INCREMENT]( state, action) {
  
  关于 [type.INCREMENT]
    1. type.INCREMENT(){}直接这么写是错的，因为属性名默认为字符串不解析
    2. 上面写法相当于在对象内 type.INCREMENT:funciton(){} 所以还是字符串

    state.count = action.payload
  }
}
export default mutations

---

getter.js

const getters = {
这里的第一个参数就是 state 类比事件处理函数中的 e
  getInfo: state => state.count
}
export default getters

---

type.js

这里通过单独的type.js文件，做到修改一个更新全部的目的

export const INCREMENT = 'INCREMENT'
export const ADD = 'ADD'
export const REMOVE = 'REMOVE'

---

Vuex的使用（state修改的前后）

1. 前(修改)

前标准(走actions)
this.$store.dispatch('actions_name', payload_value)

非标准(走 mutations)
<button @click="clickHandle">
clickHandle(){
  this.$store.commit('mutationsFN', val)
}
mutationsFN(state, newValue){
  state.xx = newValue
}

或
<button @click="clickHandle">
clickHandle(){
  this.$store.commit('mutationsFN', val)
}
mutationsFN(state, payload){
  state.xx = payload.value
}
this.$store.commit({
  type: 'mutationsFN',
  value: xx
})

vuex-mutation-对象风格的提交方式
https://vuex.vuejs.org/zh/guide/mutations.html

2. 后(获取)

后标准(通过 getter 获取 state)
这里的fn对应 getter.js 中 getters 对象内的方法名。其中第一个参数为 state
this.$store.getters.fn

非标准(直接获取 state)
this.$store.state.count

3. 新增

addStateHandle(){
  this.$set(this.$store.state, 'newProp', 123)
  
  或
  this.$store.replaceState({
    ...this.$store.state,
    newAdd: 'newAdd'
  })
}

component --> action --> mutation --> state <–getter<–component
前标准关键：通过 dispatch 使用 action 内的 actions
后标准关键：通过 this.$store.getters 访问 store 内的数据

---

通过 Vuex 提供的四种简化辅助工具操作 vuex

1. mapState

import { mapState } from 'vuex';

computed: {
  ...mapState(['prpo'])
},

3. mapGetters()

import { mapGetters } from 'vuex';

computed: {
  ...mapGetters([getters_FnName]),
  xxx,xxx
}

4. mapActions()

import { mapActions } from 'vuex';

methods: {
  ...mapActions([Actions_FnName]),
}

5. mapMutations(非标准)使用这个工具后mutations对象内的方法第二个参数aciton为val，不在为{type:,payload}的对象

import { mapMutations } from 'vuex';

methods:{
  ...mapMutations( ['mutations_FnName'] ), // 将 `this.mutations_FnName()` 映射为 `this.$store.commit('mutations_FnName')`
}
<button @click="mutations_FnName(value)">

或
methods:{
  ...mapMutations(['mutations_FnName']),
  mutationsHandle(){
    this.mutations_FnName(value)
  }
}
<button @click="mutationsHandle">

---

数据交互

public 目录下新建 data.json
const state = {

}