学无止境,天涯煮梦!

非通用父组件的vue组件之间:数据共享vuex

2018-07-27 11:39:24 | 煮梦 | VUE

一、安装vuex

npm i vuex -D

二、创建vuex

在src目录下,新建一个store目录,并在其中建立index.js 在index.js中写入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)   //实例化vuex
export default new Vuex.store({
state: {
content1: '内容1'
},
actions: {
// 读取要修改的数据,调用mutaions中的方法
},
mutations: {
// 改变state共享数据的内容
}
})

三、引入到vue项目中

打开main.js import store from '@/store' //如果名字为index.js,vue会自动寻找index.js 在new Vue({})中,注入store

new Vue({
el: '#app',
router,
store,    //这里为store:store,如果引入变量名为store,则不需写全格式
components: { App },
template: ''
})

这样就可以全局使用$store方法了

四、读取store的共享数据

打开组件1

{{this.$store.state.content1}}

五、修改store的共享数据

打开组件2 比如点击某dom,将相应数据传递过去

methods: {
updataClick (obj) {
this.$store.dispatch('自定义事件,如changeData', obj)
//为store派发一个自定义事件,内容为obj的内容
}
}

打开store/index.js 在mutations中创建修改函数

mutations: {
updataStore (state, data) {
//  参数一为Vuex.store下的state对象中的内容
//  参数二为从actions传递来的数据
this.state.content1 = data.name
this.state.content2 = data.title
}
}

在actions中写入:

actions: {
changeData (context, data) {
//  context,上下文,名称随意
//  data为获取要修改的数据,名称随意
//  函数名changeData,必须与组件2中,自定义事件名称相同
context.commit('updataStore', data)   //调用mutations中的函数,并传入数据
}
}

六、其它

6-1 vue中,用js跳转到某一页

this.$router.push('/地址')

6-2 本地储存localStorage,刷新页面后,保存上一次操作的数据

mutations: {
updataStore (state, data) {
this.state.content1 = data.name
this.state.content2 = data.title
try {
localStorage.content1 = data.name
localStorage.content2 = data.title
//  注:这里的content1和2,与this.state.content1并不是一个东西
//  这里的content1,是存在本地储存中的变量名,名称随意
//  不写try{}catch(err){}也是可以的,但部分用户会开启隐身模式或者关闭本地储存
//  一旦如此,localStorage将失效,并报错阻止程序继续运行,使用try可规避这一点
} catch (err) {}
}
}

关于默认数据的设置

state: {
content1: localStorage.content1 || '煮梦'
//如果有本地储存的数据,则优先本地储存的数据,没有则使用煮梦
}

在这里,也需要加上try catch 在export default上方写入

let stateContent1 = ''
let stateContent2 = ''
try {
stateContent1 = localStorage.content1 || '煮梦'
stateContent2 = localStorage.content2 || '真他妈帅'
} catch (err) {}
export default new Vuex.store({
state: {
content1: stateContent1
content2: stateContent2
}
})

6-3 store的高级用法在四中,获取store的方法为this.$store.state.xxx,过于臃肿,因此有简便的方法 打开某组件

import { mapState } from 'vuex'     // mapState是内置关键字,不可改
computed: {
...mapState (['content1'])
}

这样就可以直接{{content1}}了mapState,储存的是store中state对象内的数据。...为展开运算符,在...mapState(['content1'])中,content1为store.state对象里的属性名。这里通过...mapState,将store.state中的数据,映射到computed计划属性的content1中,也就是说,content1即是store.state的属性,此时又是computed自定义的计算属性名

上一篇 下一篇