Vuex状态机

vuex

状态机，对公共的状态进行管理，是一个单项数组流
如：当一个轮播图的组件在很多的页面都使用到时，那么这个轮播图的数据就可以存放在这个状态机里面
组件触发状态机的action，action方法获取数据后，通过commit提交给突变mutations，突变修改state，组件获取state的数据 this.$store.state.xxx;

仓库配置

state

维护的是公共的的状态，类似于data

getter

类似我们的计算属性computed，主要处理state的数据，并返回一个新数据 

mutations

突变，是修改state的唯一的一种方式，只能做同步操作，即不能发送请求。
例：
	Data(state,a,b){
		 state.xxx = a
	}

参数

state

state：第一个参数，要传递这个参数用于修改我们的修改state，
后面的参数都是传递过来的参数

payload

为第二个参数，是传递过来的参数，参数存放于此

actions

动作，类似于methos。主要用于处理异步操作。
例：
	actions:{
		test({commit}){
		let res = awiat load('')
			 commit('TypeNavData', res.data)
		}
	}

参数

sto

默认的第一个参数，是一个类状态机的对象，是 {commit,dispatch,....}等方法，

commit

commit ：提交突变
	例：
	 commit('Data', res.data) // 表示把res.data传递给mutations的Data方法，让它去修改state的值。

payload

是传递过来的参数

modules

里面放着一个一个小的仓库/状态机

namespaced 命名空间

多个小仓库时，要获取小仓库的值，应该开启命名空间 namespaced：true
当开启了命名空间之后，把文件名作为了该仓库的名字，
即取值的话就是 ...mapState('名字',['state里面的参数名'])

辅助函数 mapxxx

当我们要获取vuex里面的多个属性时，都使用this.$store会很麻烦，那么就使用辅助函数来生成映射，注意！！如果辅助函数的第一个参数不是数组是，那么就是命名空间。

辅助函数的种类

1.mapState：
	如果要使用状态机里面的state属性，那么就是使用mapState，一般放在computed里面，以下相同
2.mapGetters
3.mapMutations
3.mapActions

辅助函数的使用

中括号写法

1.导入辅助函数 import {mapState} from 'vuex' 
2. computed：{
	  ...mapGetters(['getters里面的参数'])，
	}
	methods：{
		  ...mapMutations(['mutations里面的参数'])，
		  ...mapActions(['actions里面的参数'])，
	}
3.使用以上之后，那么直接写参数名即可

命名空间写法

当我们的仓库开启了命名空间之后。就相当于我们的仓库拥有了名字，辅助函数的调用也要用到我们的名字
例：
 ...mapState('仓库名',['state里面的参数'])，
   ...mapGetters('仓库名',['getters里面的参数'])，

括号写法

注意一般是写在computed里面，传递进去的参数state是总仓库，如果要访问小仓库里面的变量，那么要加上仓库名

computed:{
  ...mapState({
      data:(state)=>{return state.仓库名.state里的参数名}
    })
  ...mapGetter({
		getterData:(state)=>{ return state.仓库名.getter里的参数名}
	})
    }

组件内使用vuex

触发动作

即触发状态机里面的actions，一般写在mounted里面或created里面都可以
例：
	 this.$store.dispatch("actions里面的方法名",参数);  

注意如果vuex里面的action里方法使用的第一个参数不是sto，那么当使用dispatch时需要传递第一个参数为$store,否则参数会串。建议action里面使用的第一个参数还是sto，不是{commit}

获取状态机的数据

导入方法
import { mapState } from "vuex";
 ...mapState({
  Data: (state) => {
    return state.home[可选参数，如果是有小仓库里面的值].data;
  },
}),

获取getter

例：
	this.$store.getter('getter里面的方法')

在vue-cli里面使用状态机

注意vuex的版本最好选择3.1否则会报错
在src里面创建store文件夹，创建vuex实例，并暴露出去

import Vue from 'vue'
import Vuex from 'vuex'
// 引入小仓库
import user from './moudles/user'

Vue.use(Vuex)
const state = {}
const getters = {}
const mutations = {}
const actions = {}
const store = new Vuex({
  state,
  mutations,
  getters,
  actions,
  modules: {
    user,
  }
})
export default store;

在store里面创建一个文件夹moudles，里面可以存放各种小仓库
例：创建一个小仓库 user.js 注意开启命名空间

// 这是user小仓库
const state = {}
const getters = {}
const mutations = {}
const actions = {}

export default {
  namespaced: true,
  state,
  mutations,
  getters,
  actions,
}

在mainjs里面挂载store实例

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'swiper/css/swiper.css'
import store from './store/index'


Vue.config.productionTip = false

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

在组件内使用

import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
export default {
  components: {
    Home,
  },

  computed: {
    ...mapState("user", ["name"]),
    ...mapGetters("user", ["getterData"]),
  },
  methods: {
    ...mapActions("user", ["editer"]),
    ...mapMutations("user", ["ED"]),

    ed() {
      // 调用以上分解出来的方法
      this.$store.dispatch("user/editer", "修改名字");
      this.ED();
      // console.log(this.$store);
    },
  },
};