VueX基本使用

安装

npm install vuex --save

根路径下创建store文件夹，这是vuex文件

main.js内引入vuex文件

main.js
import store from './store'
new Vue({
  router,
  store, // 此时所有组件对象都多了一个属性$store
  render: h => h(App)
}).$mount('#app')

使用
在.vue文件内触发vuex

<template>
  <div class="hello">
    <button @click="change">触发vux</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  methods: {
    change() {
      let data = '测试vuex接收数据'
      this.$store.dispatch('VuexTest', data)   
    }
  }
}
</script>

actions.js内

// 接受组件通知触发mutatios调用间接更新状态方法的对象
// 引入mutation-types与mutations进行通信
import {TEST} from './mutation-types'
export default {
// VuexTest是页面发起的触发vuex的方法
  VuexTest ({commit}, params) {
    commit(TEST, {params})
  }
}

mutation-types.js

// 所有mutation的名称常量, 用于actions和mutations通信
export const TEST = 'TEST'

mutations.js

// 包含多个由action触发直接更新状态方法的对象
// 引入mutation-types内定义的常量用于和mutation通信
import {TEST} from './mutation-types'
export default {
  [TEST] (state, {params}) {
    state.list = params
  },
}

state.js

// 状态对象，存储数据状态
export default {
  list: ''
}

vue文件内使用vuex内的值

<script>
import {mapState} from 'vuex'
export default {
  name: 'HelloWorld',
  computed: {
    ...mapState(['list'])
  },
  methods: {
    change() {
      console.log(this.list, '存到vuex内的数据')
    }
  }
}
</script>