vuex

了解vuex核心概念请移步 https://vuex.vuejs.org/zh/ 一、初始vuex 1.1 vuex是什么 那么先来看看这两个问题: 什么是vuex?官网说：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 按个人通俗理解来说就是：vuex就是用来管理各个组件之间的一些状态，可以理解为这些状态就是公共(共享)部分。此时任何组件都能从中获取状态或者触发一些行为事件。 什么情况下用到vuex?官网说：如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。 好，那么现在我就当你是开发一个比较大型的项目，在那些地方会用到vuex呢？ 随着应用的复杂度增加,组件之间传递数据或组件的状态会越来越多，举个例子：当A组件进入B组件（A页面进入B页面）的时候，常常需要带一些参数过去，那么此时你可能会选择放在url后面当做参数传递过去，如果你不想轻易暴露参数，你有可能先存到session中或者localstorage中，然后进入到第二个页面的时候再取出来。不错，这确实是一种解决方法，而且用的不少。但这不是一个好的方法

案例: 父组件 < template > < div id ="app" > < h1 > vuex </ h1 > < h3 > count:{{count}} </ h3 > < button @click ="count++" > +1 </ button > < button @click ="count--" > -1 </ button > <!-- 父组件向子组件传递参数 --> < hello-word :count2 ="count" ></ hello-word > </ div > </ template > < script > import HelloWord from " ./components/HelloWord " ; export default { name: ' App ' , components:{ HelloWord }, data() { return { count: 0 } } } </ script > 子组件 < template > < div > < h2 > 我是子组件 </ h2 > < h3 > count3:{{count2}} </ h3 > </ div > </ template > < script > export default { name: " HelloWord " , props:{

1. 目录结构 2. 别名 在nuxt.js的vue页面中，如果需要引入assets或者static等目录中的资源，可以使用~或~~。 3. 路由 Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置。 要在页面之间使用路由，我们建议使用<nuxt-link>标签。 <router-link>是vue原生态切换路径标签。 <nuxt-link>在原生态的基础上，进行有关nuxt增强。(官方实例: https://zh.nuxtjs.org/examples/named-views/ ) 静态路由 动态路由 动态嵌套路由 动态路由命名 路径“/news/123”匹配“_id.vue”还是“_name.vue”？ 我们可以使用<nuxt-link>解决以上问题 <nuxt-link:to="{name:'news-id',params:{id:1002}}">第2新闻</nuxt-link> <nuxt-link:to="{name:'news-name',params:{name:1003}}">第3新闻</nuxt-link> 通过name确定组件名称：“xxx-yyy” 通过params给对应的参数传递值 默认路由 4.自定义布局 在layouts目录下创建组件：layouts/blog.vue 在需要的视图中使用blog布局 <script>

什么是Vuex Vuex是一个专为Vue.js应用程序开发的状态管理模式。简单来说，用于维护组件之间的数据。(官网: https://vuex.vuejs.org/zh/guide/state.html ) 2.vue如何整合vuex 步骤一：在使用vue create 创建项目时，需要选择vuex组件(因为个人创建项目时已经保存了模板所以已经不用去勾选了)。 步骤二：将创建src/store/index.js文件，用户存放状态（数据） 3.vuex组成 vue脚手架自动创建内容 exportdefaultnewVuex.Store({ state:{ }, mutations:{ }, actions:{ }, modules:{ } }) state，vuex状态，也就是数据。（不允许直接修改，只能读） mutations，修改，用于修改数据。 actions，用于操作mutations，运行发送ajax。 3.1. state使用 1)如何声明变量，用于存储数据 importVuefrom'vue' importVuexfrom'vuex' Vue.use(Vuex) exportdefaultnewVuex.Store({ state:{//状态，用于存放数据，类似data区域 count:0 }, mutations:{ }, actions:{ }, modules:{

import Vue from 'vue' import Vuex from 'vuex' const state = { isLogin: true, dialogVisible: false, detail: false, routes: {}, insurList: [], insurOption: [], barTitle: '', reason: '', //费因名称 ysShow: false, questionPageNo: 1 } const mutations = { // 改变state里的数据， setReason(store, res) { state.reason = res }, } const actions = { getInsue(context) { return new Promise((resolve, reject) => { Vue.axios.get(`/remotes/productList`).then(res => { let arr1 = [] const arr = [] res.detail.map(res => { const obj = { id: res.insType, productName: Obj.insurType[res.insType], children: res.productList } arr

一定要先拷贝 let { showLabel, actualValue } = this .record; let show = this .rowData[showLabel]; let actual = this .rowData[actualValue]; const { formGroup } = this .$store.state.right; const { dispatch } = this .$store; let group = _.cloneDeep(formGroup) // 这一步必须, 如果直接 formGroup.map( ... ) 数据响应不到 const newFormGroup = group .map(item => { if (item.componentx === "modal" ) { item = { ...item, uniqueKey:createUuid() } return (item = { ...item, initValue: show, actualValue: actual }); } else { return item; } }); dispatch( "right/updateFormGroup" , newFormGroup); this .visible = false ; 来源： oschina 链接：

vue create 和 vue init的区别 vue init <template> <dir> 可以根据模版创建项目 ，可供选择的模版有 browserify browserify-simple simple webpack webpack-simple 使用 vue init webpack-simple demo 可以创建一个webpack打包的项目 使用 vue create <dir> 可以创建出vue-cli官方打包的项目 插件的写法 定义 、 安装 调用 Mixin的使用 定义 使用 不使用Vuex ，手写state的写法 构造state数据 编写state插件 引入state 使用state filters写法 定义 注册 来源： oschina 链接： https://my.oschina.net/lilugirl2005/blog/3219467