vuex的安装 配置和使用

1.安装

npm install vuex --save

2.配置

新建一个store文件夹，在文件夹下新建一个index.js文件

3.引入

 在index.js中输入

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

在main.js中进行引入

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false

new Vue({
    store,
    render: h => h(App),
}).$mount('#app')

4，使用

使用两个组件进行组件通信

在state组件里初始化数据

 state: {
        number: 1
    },

在第一个组件里把number渲染页面

<template>
  <div class="hello">
    <p>{{this.$store.state.number}}</p>

  </div>
</template>

在另一个组件里定义一个按钮，定义方法

<template>
  <div>
    <button @click="add">点我加一</button>
    <h1>{{this.$store.state.number}}</h1>
  </div>
</template>

<script>
export default {
  name: "Hello",
  data() {
    return {}
  },
  methods: {
    add() {

      this.$store.dispatch('jia')
    }
  }
}
</script>

使用actions接收动作

    actions: {
        jia(context) {
            // console.log('actions中的jia被调用了',miniStore,value)
            context.commit('JIA')
        },
    },

在mutations执行加的方法

  mutations: {
        //执行加
        JIA(state) {
            // console.log('mutations中的JIA被调用了',state,value)
            state.number += 1
        }
    },

页面效果