vue 安装使用 vuex

# vuex 的核心概念

核心	概念
State	访问状态对象
Getter	计算过滤操作
Mutation	修改状态
Action	异步修改状态
Module	模块组

# npm 安装

npm install vuex --save

# 在 src 文件夹下新建 vuex 文件夹，再在 vuex 文件夹下新建 store.js 文件

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

Vue.use(Vuex);


export default new Vuex.Store({
  state: {  // 全局变量在这里定义并且初始化，获取方法 this.$store.state.name
    name: 'hello',
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {  // 全局方法在这里编写  方法名: state => { 方法体 }，获取方法 this.$store.getters.getData
    getData: state => {
      return state.todos.filter(todo => todo.done);
    }
  },
  mutations: {  // 这里同步操作全局变量，获取方法 this.$store.commit('setName', {newName: 'hello'})
    setName(state, payload) {
      state.name = payload.newName;
    }
  },
  actions: {  // 这里可以异步操作全局变量，获取方法 this.$store.dispatch('setName', {newName: 'hello'})
    setName({commit}, payload) {
      commit('setName', payload);
    }
  }
});

# 引入 store.js

在 main.js 中写入以下内容：

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

# 页面中使用

<template>
  <div id="app">
    {{$store.state.name}}
    {{$store.getters.getData}}
    <button @click="$store.commit('setName', {newName: 'hello'})">更改name为hello</button>
    <button @click="$store.state.name = '123'">更改name为123</button>
    <button @click="$store.dispatch('setName', {newName: '456'})">更改name为456</button>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

参考博客：

1. https://vuex.vuejs.org/zh/installation.html
2. Vuex教程全集 - 白话篇
3. 最详细的Vuex教程