vue使用vuex

1、安装vuex：

npm install vuex --save

2、引入vuex：

在src目录下，新建一个store文件夹，然后里面创建一个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 store from './store/index'


new Vue({
  router,
  store,
****************************

3、使用vuex：

完成这些，可以在任何组件通过$store.state.***直接调用vuex中的变量，相当于所有页面共享。

4、vuex的各种东西：

state、getter、mutation、action、module。实际使用中，至少要有state和mutaition。

更改vuex的store中的状态唯一的方法就是提交mutation。在store中的index.js中，我们可以定义多个mutation事件，供组件调用。

  mutations: {
    addOne(state){
      state.temp++
    },
  },

那么在组件中我们可以在事件中直接使用this.$store.commit('addOne')来调用他。

this.$store.commit('addOne');

在vue就可以直接使用

{{this.$store.state.temp}}

来显示。