vuex总结（待更新）

基础用法

当我们在小项目里面使用vuex的时候，我们会先建一个store.js，内容如下：

/*
vuex最核心的管理对象store
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

/*
相当于data对象的状态对象
 */
const state = {
  count: 0  // 指定初始化数据
}

/*
包含了n个直接更新状态的方法的对象
 */
const mutations = {
  ADDCOUNT (state) {
    state.count++
  }
}

/*
包含了n个间接更新状态的方法的对象
 */
const actions = {
  add ({commit},payload) {
  	console.log(payload) //10
  	console.log(this.state.count)
    // 提交一个mutation请求
    commit('ADDCOUNT')
  }
}

/*
包含多个getter计算属性的对象
 */
const getters = {
  count (state) {
    return state.count
  }
}

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

随后在main.js文件里面导入

import Vue from 'vue'
import App from './App'
import store from './Store'

new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<app/>',
  store // 注册上vuex的store: 所有组件对象都多一个属性$store
})

然后再app.vue里面就能使用了

<template>
  <div id="app">
  	<h1>{{$store.state.count}}</h1>
    <h1>{{count}}</h1>
    <button @click="add"></button>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    count () {
      return this.$store.state.count
      // return this.$store.getters.count
    }
  },
  methods: {
     this.$store.dispatch('add',10)
  }
}
</script>

高级用法

store单独拎出来做个文件夹

state.js

export default{
    count:0,
    msg:'hello'
}

actions.js

import {ADDCOUNT} from './mutation-types'

export default {
     add({state, commit },payload) {
     	 console.log(state.count)
         commit(ADDCOUNT)
     }
}

mutation-types.js

export const ADDCOUNT = 'add_count'

mutation.js

import {ADDCOUNT} from './mutation-types'

export default{
    [ADDCOUNT] (state) {
      state.count++
    }
}

getters.js

export default{
  count (state) {
    return state.count
   }
}

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)

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

main.js

import Vue from 'vue'
import App from './App'
import store from './store'

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

render的解释

render:h=>h(App)
//等于下面两行
components: {
  App
},
template: '<App/>',

App.vue

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <h1>{{count}}</h1>
    <h2>{{msg}}</h2>
    <button @click="add"></button>
    <router-view/>
  </div>
</template>

<script>
import {mapGetters,mapActions,mapState} from 'vuex'
export default {
  name: 'App',
  computed: {
    ...mapGetters(['count']),
    ...mapState(['msg'])
  },
  methods: {
    ...mapActions(['add'])
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这里使用mutation-types是为了方便管理，官方解释：

如果项目用有很多模块，应当建一个store文件夹，采取单个文件的形式（state、action、mutation、getter都放一块）进行数据管理

tips

异步操作放在action中，mutation中都是同步函数，官方解释：

这也是为什么store.dispatch(‘add’),然后通过action再commit mutation 而不是直接分发mutation。

使用Vuex 报错 unknown action type:XXX（未知的操作类型:）