store的gette,state,mutations的基本使用

1、在store文件夹下，分别新建gette,state,mutations文件夹并新建对象的js文件

getter.js

export default {
  // getter接受2个参数 state 和getter
  fullName (state, getter) {
    return `${state.firstName} ${state.lastName}`
  }
}

mutations.js

export  default {
  updateCount (state, num) {
    state.count = num
  }
}

state.js

export  default {
  count: 0,
  firstName: 'Amy',
  lastName: 'Ye'
}

2、把三者引入到store.js中

import Vuex from 'vuex'

import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'

export default () => {
  return new Vuex.Store({
    state: defaultState,
    mutations,
    getters
  })
}

3、在index.js引入store

import Vue from 'vue'
import Vuex from 'vuex'
import createStore from './store/store'

Vue.use(Vuex)

const store = createStore()
new Vue({
  store,
  render: (h) => h(App)
}).$mount('#root');

4、在app.vue中使用

import {
    mapState,
    mapGetters,
  } from 'vuex'
export default{
      computed: {
        count () {
          return this.$store.state.count
      },
    
      fullName () {
          return this.$store.getters.fullName
      }
    },
}
这种获取state和getter的方法太麻烦，我们可以使用vuex中的mapState和mapGetter辅助函数，快速使用

5、mapState和mapGetter辅助函数

import {
    mapState,
    mapGetters,
  } from 'vuex'
export default{
    computed: {
//      ...mapState(['count']), // 重新定义的值名字与state的名字一致时
      ...mapState({ // 获取state的数据
//        counter: 'count' // 赋值的方式
        counter: (state) => state.count // 函数的形式
      }),
//      count () {
//        return this.$store.state.count
//      },
      ...mapGetters(['fullName']) // 获取getter中的数据
//      fullName () {
//        return this.$store.getters.fullName
//      }
    },
}
...mapState这种是es（7）未定稿的写法，所以在使用前必须按照插件
    cnpm i babel-preset-stage-1 D
    在.babelrc文件中设置     "stage-1" // vuex中...的写法
{
    "presets":[
        "env",
    "stage-1" // vuex中...的写法
    ],
    "plugins":[
        "transform-vue-jsx",//支持jsx
    "syntax-dynamic-import" //  异步组件以函数的形式引入
    ]
}