vue（九）——vuex

目录

一、安装vuex

1、安装vuex

2、创建vuex

二、vuex的使用

---

一、安装vuex

    当然，如果使用脚手架，已经选择了使用vuex，这步可以跳过

1、安装vuex

npm install vuex

2、创建vuex

1、在src目录下创建store目录，并在此目录下创建index.js(这点见仁见智，看个人喜好创建目录结构)

2、引入vue和vuex；并将vuex安装到vue上。

3、创建并导出vuex.store

4、在main.js中引入vuex并注册

store目录下的index.js的基本结构：

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    // 存放数据
    state:{
    },
    // 修改数据（通常只实现一个功能）
    mutations:{
    },
    // 也是修改数据，可以支持异步修改数据（通常在里面实现复杂处理）
    actions:{

    },
    // 获取数据（功能基本同计算属性）
    getters:{

    }
})

main.js中的引入和使用：

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入vuex仓库
import store from './store/index';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 注册使用vuex仓库
  store,
  router,
  components: { App },
  template: '<App/>'
})

二、vuex的使用

在state中保存数据，通过mutations中的方法修改

组建中使用this.$store.state.count（或者getters）来得到数据，在事件函数中使用this.$store.commit调用mutations中的方法来修改数据。

store代码：

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    // 存放数据
    state:{
        count:1
    },
    // 修改数据（通常只实现一个功能）
    mutations:{
        increment (state) {
            state.count++
          }
    },
    // 也是修改数据，可以支持异步修改数据（通常在里面实现复杂处理）
    actions:{

    },
    // 获取数据（功能基本同计算属性）
    getters:{

    }
})

组件代码：

<template>
  <div class="hello">
    {{this.$store.state.count}}
    <button @click="add">+</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods:{
    add(){
      this.$store.commit('increment');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

效果：

 actions使用this.$store.dispatch()来调用，其他的同mutations。