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

原创 CaptainLi 教程 学无止境 189阅读 2018-07-27 11:49:26 举报

好些年没在这儿发表过文章,小来一发……

一、安装vuex

二、创建vuex

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

三、引入到vue项目中

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

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

四、读取store的共享数据

打开组件1
<div>{{this.$store.state.content1}}</div>

五、修改store的共享数据

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

打开store/index.js
在actions中写入:

在mutations中创建修改函数

六、其它

<strong>6-1 vue中,用js跳转到某一页</strong>

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

关于默认数据的设置

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

<strong>6-3 store的高级用法</strong>

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

这样就可以直接{{content1}}了

mapState,储存的是store中state对象内的数据。

...为展开运算符,在...mapState(['content1'])中,content1为store.state对象里的属性名。

这里通过...mapState,将store.state中的数据,映射到computed计划属性的content1中,也就是说,content1即是store.state的属性,此时又是computed自定义的计算属性名

demo

git地址:git@github.com:ITcaptainli/vuex.git

文章来源个人博客

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复