vuex的安装配置和存值取值详解

vuex

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

按住 shift键 的同时 右键 你要安装vuex的项目 然后在弹出的选项框中选择 在此打开命令窗口 然后按照下面的代码安装就可以喽！

安装vuex： npm install vuex --save

在命令窗口中安装好vuex后，接下来就可以在vue中进行vuex的后续操作了

1》在vue项目中的src文件夹中创建store文件夹
2》 在store文件夹中创建index.js文件
3》在js文件中引入 vue和vuex（import Vue from ‘vue’ 和import Vuex form ‘vuex’）
4》Vue.use(Vuex) 在vue中标明使用vuex
5》在main.js中引入store文件夹中的index.js(import store from ‘./store/index.js’)，然后把store放在vue实例化对象中就ok了new Vue({store, render: h => h(App)}).$mount(’#app’)，

 写一些大项目那么vuex可以给我们带来很大的便利，
 开发移动App，如果是开发网页，可能造成一些数据泄露，导致数据不安全

理解Vuex 的核心

1.通过_state属性实现中心化、自包含数据中心层。
2.通过 dispatch 方法，回调触发事先注册的_mutations方法。

我们需要配置的都已经配置好了，接下来我们可以在store文件夹中的index.js中存值了

index.js

import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
const store = new Vuex.Store({
state: {}, 将你想要存储的数据信息放在state里面 例如 存储用户信息
state: {
user: {
name: ‘’,
age: ‘’,
tel: ‘’,
isLogin: ‘’
},
status: false
}
mutations: {}, 一个同步的执行函数 在这个里面可以写自己要处理的函数 例如要修改user中的name
mutations: {
changeName (state, 你想传入的值) {
state.name = 你想传入的值
},
changeTel (state,newTel) { 修改用户的电话号码的函数
state.user.tel = newTel
}
}
getters: {}, // getters是一个计算属性 在getters中可以return一个值 例如我要返回用户的电话号码
getter: {
tranTel (state) {
return state.tel
}
}
actions: {}
})
export default store
此处是将本文件导出，然后让main.js去引入本文件

既然把index.js写好了，下面我们一起来看一下怎么存值和取值吧

在vue组件中调用的方法

存值

1、重新赋值的方法

    方法一、 this.$store.commit('要调用的函数名', 你想传入的数据) 函数是mutations里面的函数
    例如 要去覆盖user中的tel
    this.$store.commit('changeTel','1255841311')
    方法二、 在组件中引入对应的mapState,mapMutations,mapGetters,mapActions
    引入的方法 import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
    这些方法不一定都要用可以选择具体要使用的方法进行引入
    在组件中的methods对象中引入对应的mutations中的方法**
    例如
    methods: {
        ...mapMutations([
        '要引入的方法名' 这个名字可以选择使用 就是说你想用那个函数就写上哪个函数的名字
        ])
        比如我要修改用户的电话号码
        ...mapMutations([
            'changeTel' 然后这个函数就可以在你想使用的位置通过this.changeTel('你想要改成的新数据')
        ])
    }

取值

2.获取state中的值得方法

    方法一、 this.$store.state //可以直接获取所有的数据 不推荐使用
    方法二、 this.$store.getters.你想使用的函数名 这个函数是你的store 里的js文件中的getters里面的函数名
    例如 要获取用户的电话号码
    this.$store.getters.tranTel
    方法三 在组件中引入对应的mapState,mapGetters
    引入的方法 import {mapState,mapGetters} from 'vuex' 引入的方法可以根据自己的需求引入 此处为例子非固定模式
    （1） 在组件中的计算属性中写入 
    computed: {
        ...mapState({
            函数名称（自定义）： （state）=> {
                return state.你想使用的数据变量
            }
        })
    }
    例如
    computed: {
        ...mapState({
            userName： （state）=> {
                return state.user.name
            }
        })
    }
    (2) 也是在计算属性中写入 不过方法略有不同
    computed: {
        ...mapState([
        '你想使用的变量名' 要用引号包裹
        ])
    }
    例如 
    computed: {
        ...mapState([
        'user',
        'status' 你可以引入多个值每个值之间用逗号隔开就好了
        ])

}