Vuex

　　Vuex是什么？

　　　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

　什么是“状态管理模式”？

　　　　这个状态自管理应用包含以下几个部分：

　　　　　　状态，驱动应用的数据源；

　　　　　　视图，以声明方式将状态映射到视图；

　　　　　　操作，响应在视图上的用户输入导致的状态变化。

　　

 

　　　　但是，当我们的应用遇到多个组件共享时，单向数据流的简洁性很容易被破坏：

　　　　　　多个视图依赖于同一状态

　　　　　　来自不同视图的行为需要便更同一状态

　　　　 对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码

　　　　因此，我们为什么不把组件的共享状态抽取出来，以一个全局例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的视图，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

　　　　通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

　　　　这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

　　　　如果你想交互式地学习 Vuex，可以看这个 Scrimba 上的 Vuex 课程，它将录屏和代码试验场混合在了一起，你可以随时暂停并尝试。

　　　　

　　什么情况下我应该使用 Vuex？

　　　　Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

　　　　如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

　　　　Flux 架构就像眼镜：您自会知道什么时候需要它。

　安装

　　方法一：在脚手架 创建项目时勾选vuex的选项系统会自动创建

　　　　

 　　　方法二：npm 或 Yarn安装

　　　　npm安装：

npm install vuex@next --save

　　　　Yarn安装：

yarn add vuex@next --save

　　配置

　　　　如果采用脚手架方式进行创建，无需任何操作，可以忽略此步骤

　　　　新建store文件->index.js，进行如下配置：

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    
  },
  getters: {
    
  },
  //里面定义方法，操作state方发
  mutations: {
    
  },
  // 操作异步操作mutation
  actions: {
    
  },
  modules: {
    
  },
})

　　　　main.js中引入：

　　　　　　

　　基本使用

　　　　state

　　　　　　　　提供唯一的公共数据源，类似于 data，在 vuex 的 state 里定义的数据可以在任何组件里使用。

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    name:"张三",
    age:12,
    count:0
  },
})

　　　　调用的时候这样调用：

this.$store.state.全局数据名称

　　　getters

　　　　　　类似于 vue 中的计算属性。

　　　　　　使用的时候通过 this.$store.dispath('xxx', 参数) 的方式使用。

　　　　mutations

　　　　　　改变 state 里的数据的唯一方法就是通过 mutations，mutations 里会定义一些同步方法。

　　　　　　mutations 里的每个方法的第一个参数会接收 state，从第二个参数开始才是用户传递的参数。

　　　　　　使用的时候是通过 this.$store.commit('xxx', 参数) 的方式使用。

 

methods:{
//加法
btn(){
this.$store.commit("addcount",10)     //每次加十
}
//减法
btn1(){
this.$store.commit("reduce") 
}
}

　　　　actions

　　　　　　与 mutations 非常相似，里面会进行一些异步的操作。

　　　　　　使用的时候通过 this.$store.dispath('xxx', 参数) 的方式使用。

this.$store.dispath("reduce")

 

　　　　modules

　　　　　　可以将 store 分成模块，每个模块都有自己的 state、getters、mutations、actions，甚至可以嵌套子模块。如果希望模块能有更高的复用性和封装度，那么可以通过添加 namespaced:true 的方式使其变成带命名空间的模块。模块被注册后它的所有 getters、actions 以及 mutations 都会自动根据模块注册的路径调整命名。

　　　　　　模块里的 mutations 是通过 this.$store.commit('模块名/mutation') 的方式使用的。

　　　　　　模块里的 actions 是通过 this.$store.dispatch('模块名/action') 的方式使用的。

　　　　　　模块里的 getters  是通过 this.$store.getters['模块名/getter'] 的方式使用的。

 

modules: {
cityModules: {
    namespaced:true,
    state: {
        cityname: "中国",
    },
    mutations: {
        cityfunction(state){
            state.cityname="日本鬼子“
        }
    },
},
userinfo: {
    state: {
        username :"张启楠",
    },
}，