vuex基础引入还有...的作用

怕自己后面用的时候忘记,写一下,按照图片左边那样(看不清没关系 我写清楚了)

先 npm install vuex
再main.js里面引入,

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)

再创建一个store对象

var store=new Vuex.Store({
  state:{
    a:1,b:2
  },
  mutations: {
   fn1(state,payload){ }
  },
  actions: {  },
  getters: {   }
})

再注册一哈

new Vue({
  store,  //意思是store=store 所以写缩写
  el: '#app',
  render: h => h(App)
})

在actions里面写一些逻辑,然后在mutations里面把刚写的逻辑提交的state里面,

用的时候直接在子组件里面写,(这里缩写好用) 写之前要引入,要用哪个引哪个

import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';

然后接收一下,并把他们写在这个要用的组件的computed里面
this.$store.state.a
就可以了,接收之后,可以在compued里面的后面写…mapstate/…mapActions之类的,

**这里 …的作用参考一个这个

解构赋值，首页mapstate返回的是一个对象，
模拟一个对象 var z={ a: 3, b: 4 }; 再n里面写…z,
let n = { x, y, …z };
n; // { x: 1, y: 2, a: 3, b: 4 }
就把z混到n里面了
…z可以将z对象，混入到n对象中。…mapstate就是将mapstate对象混入到computed对象中