vuex

[Narutocc]

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 其实最简单理解为，在我们写Vue组件中，一个页面多个组件之间想要通信数据，那你可以使用Vuex 安装

npm install vuex --save

引用 在一个模块化的打包系统中，您必须显式地通过Vue.use()来安装 Vuex：

import Vue from 'vue'//var Vue = require('vue')
import Vuex from 'vuex'//var Vuex = require('vuex')
Vue.use(Vuex)

开始 每一个 Vuex 应用的核心就是 store（仓库）。"store" 基本上就是一个容器，它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

   const store = new Vuex.Store({
   state: {
       getSearchName: 'hello vuex, I am wscats',
   },
   //接受组件commit传过来的数据并保存到state中,this.$store.commit('changeSearchName', this.searchName);
   mutations: {
       changeSearchName: function(state, a) {
           state.searchName = a;
       },
   },
   //可以从组件调用此方法获取值，一般配合计算属性动态获取值
   //(1)return this.$store.state.searchName
   //(2)return this.$store.getters.getSearchName
   getters: {
       getSearchName: function(state) {
           return state.searchName;
       }
   }
   })

   视图中获取getSearchName值然后触发search()函数，看下面的this.$store.commit('changeSearchName', this.getSearchName);函数

   <input type="search" @keyup="search()" v-model="getSearchName" placeholder="搜索" />

   通过在根实例中注册store选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store访问到

   const app = new Vue({
   router,
   store
   }).$mount('#app')

   往state设置值

   methods: {
           search() {
               this.$store.commit('changeSearchName', this.getSearchName);
           }
       },

   从state获取值

   computed: {
           searchName() {
               return this.$store.state.searchName;
                               //或者return this.$store.state.searchName
           }
       },