Vuex的初步介绍（文件的构建和状态的传递）

目录

Vuex实际上是Vue.js中的状态管理工具（公共数据存储的地方）

一、这里举个简单的例子理解一下Vuex：

二、Vuex在vue,js中的安装以及对应的配置：

三、状态的保存以及状态的调用（状态即公共数据）

四、状态的修改

---

Vuex实际上是Vue.js中的状态管理工具（公共数据存储的地方）

一、这里举个简单的例子理解一下Vuex：

以下两个页面的红框内容中的数据是可重复利用的，可以存储到Vuex中加以保存。

二、Vuex在vue,js中的安装以及对应的配置：

在终端输入安装命令：

npm install vuex@版本号 --save

一般在src文件夹下创建store文件夹，然后在store文件夹下创建index,js来存储相关Vuex的配置：

 

 配置过程类似Router:

①导入Vue以及vuex

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

②Vue挂载vuex的功能

Vue.use(Vuex)

③创建Vue.Store实例（一般含有state, mutations, actions, getters, modules参数）

const store = new Vuex.Store({
  state: {
    counter: 1000
  },
  mutations: {
    add(state){
      state.counter++
    },
    sub(state){
      state.counter--
    }
  },
  actions: {

  },
  getters:{

  },
  modules:{

  }
})

④导出实例对象

export default store

 ⑤在main.js中挂载store实例

// src/main.js文件内容

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),
  store
})

三、状态的保存以及状态的调用（状态即公共数据）

在src/App.vue中调用状态(公共数据):

//使用$store调用状态参数
<h2>{{$store.state.counter}}</h2>

当然也可以在其的子组件中同样使用$store调用相关状态

四、状态的修改

这里需要结合Vue.js官网给出的一幅图：

 错误的用法：

<button @click="$store.state.counter++">+</button>

正确的用法，先在Mutations中定义add方法，之后通过commit命令传递过去：

const store = new Vuex.Store({
  state: {
    counter: 1000
  },
  mutations: {
    add(state){
      state.counter++
    },
    sub(state){
      state.counter--
    }
  },
  actions: {

  },
  getters:{

  },
  modules:{

  }
})

<button @click="$store.commit('add')">+</button>