Vuex 理解 与 知识的详解

原创
2019/07/03 17:15
阅读数 389

一 关于存储跟数据动态传输的问题。我这边提到了vuex 仓库 管理 体系。首先我来说一下关于vuex的理解。 先说一下关于 vuex 到底是什么? 官方的解释意思是 程序开发的状态管理模式 这个状态我们可以累计额在data的属性里面。 需要共享其他组件使用的部分。 也就是说 ,我们的需要共享data,使用vuex 进行统一中式管理 二 vuex 中的默认五种基本对象 state 存储状态。 getters 对象数据获取之前的再次编辑,可以理解为state计算属性。我们的组件中使用$sotre.gerers.fun() mutations 修改状态,并同步,在组件中使用$store.commit('params') 这个和我们组件中自定义类型保持一致性 actions 异步操作。在组件中使用$store.dispath('') 可以分布式进行 modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。

三 下面对案例做一定的归纳 1 首先先更新vuex 依赖包 cnpm run vuex --save

  2 创建后执行响应的代码。
      cd app/
      npm run dev
 
 3 接下来我们在src目录下创建一个vuex文件夹

   并在vuex文件夹下创建一个store.js文件

   文件夹目录长得是这个样子

	4、目前我们还没有引入vuex,我们需要先下载vuex,并且引入它

	在保证我们处于我们项目下,在命令行输入下面命令,安装vuex

	npm install vuex --save
	
	5、安装成功之后,我们就可以在store.js中尽情玩耍我们的vuex了!

    在store.js文件中,引入vuex并且使用vuex,这里注意我的变量名是大写Vue和Vuex 
		import Vue from 'vue'
		import Vuex from 'vuex'

		Vue.use(Vuex)
		const state = {
			count: 0
		}
		export default new Vuex.Store({
			state
		})

				接下来,在main.js中引入store
				import Vue from 'vue'

				import App from './App'

				import router from './router'

				import store from './vuex/store' // 引入store

				Vue.config.productionTip = false

				/* eslint-disable no-new */
				new Vue({
				el: '#app',
				router,
				store,
				components: { App },
				template: '<App/>'
				})

				然我我们在任意一个组件中就可以使用我们定义的count属性了。

				这里我们在helloWorld中使用一下,去除helloworld.vue中不用的标签

				<template>
				  <div class="hello">
					<h3>{{$store.state.count}}</h3>
				  </div>
				</template>
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
1
分享
返回顶部
顶部