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' 你可以引入多个值每个值之间用逗号隔开就好了
])
}