VUE----vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
就像文档中所说的那样，如果只是想做一个简单的单页面，那么vuex完全没有必要，但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择

1.vuex主要组成部分：

1.state       //存放数据，相当于vue中的data
2.getters     //加工state中的数据，类似于组件中的computed
3.mutations   //存放对state中的数据的同步操作，相当于methods
4.actions     //存放对state中的数据的异步操作

2.安装vuex：

npm install vuex --save

3.在src目录下创建store文件夹：

创建store文件夹

4.在store文件夹下创建index.js文件作为入口引入文件：

你可以将所有数据都写在一个文件中，但是本着简洁的原则，应该将getters、mutations、actions都抽离出来，然后定义一个入口文件统一将它们维护在一起。

import Vue       from 'vue'
import Vuex      from 'vuex'
import state     from './state.js'
import mutations from './mutations.js'
import getters   from './getters.js'


Vue.use(Vuex)

const store = new Vuex.Store({
    state:state,
    mutations:mutations,
    getters:getters
})

export default store 

5.在store文件夹下创建state.js文件作为数据存放文件：

const state = {
    name:'kobe byrant',
    term:'laker',
    age:24
}
export default state

6.在store文件夹下创建mutations.js文件作为同步数据操作方法文件：

如果你直接操作state中的数据你可以做到数据的修改，但是在devtools中却无法捕捉到数据的变化，不利于调试

const mutations = {
    //method第一个参数是state对象，第二个参数是Payload(也就是提交的参数)
        method(state){
            state.name = state.name + 'we will remember you'
        }
}
export default mutations

7.在store文件夹下创建actions.js作为作为异步数据操作方法文件：

日常中mutations足够我们使用，但是如果存在异步数据操作，那么很遗憾，devtools仍是无法捕捉数据的变化，如果想使用devtools捕捉数据的异步操作，我们需要在mutations的基础是多增加一层actions操作。

const actions= {
    //method第一个参数是context上下文，第二个参数是Payload(也就是提交的参数)
        method(context,payload){
            context.commit('method',payload)
        }
}
export default actions

使用方法是在js中dispatch触发actions中的函数，然后在action中commit触发mutations中的方法从而修改数据

8.在store文件夹下创建getters.js作为数据获取封装方法文件：

如果你的数据层级很复杂，那么getters是个不二选择

const getters = {
   //method第一个参数是state对象，第二个参数是getter对象(即可以调用getters内部的其他方法)
       method(state){
           return state.age + '岁' + 'more time'
       }
}
export default getters

如果我们想在getters中传递参数，我们可以在getters中定义的属性中返回一个带有需求参数的匿名函数

const getters = {
    //method第一个参数是state对象，第二个参数是getter对象(即可以调用getters内部的其他方法)
        method(state){
            return function(args){
                  return  'this is' + args
            }
        }
}
export default getters

然后在模板中直接使用

this.$store.getters.methods_name(arg)

9.在main.js中引用：

import store from './store/index.js'
new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app')

10.在组件中使用

1.在template中使用

{{$store.state.key_name}}
{{$store.getters.getters_name}}

2.在js中使用：

this.$store.state.key_name                          //直接从state中获取数据  
this.$store.getters.getters_name                    //从getters中获取数据
this.$store.commit('mutations_method_name')         //通过mutations同步修改数据
this.$store.dispatch('action_methods')              //通过actions异步修改数据