有个做搞笑视频的网站,sae wordpress 图片插件,品牌策略,今天特大新闻文章目录 一、Vuex1#xff09;理解vuex2#xff09;优点3#xff09;何时使用#xff1f;4#xff09;使用步骤① 安装vuex② 注册vuex③ 引用vuex④ 创建仓库Store五个模块介绍 5#xff09;基本使用 二、Vue-router三、LocalStorage与SessionStorage、cookie的使用 一… 文章目录 一、Vuex1理解vuex2优点3何时使用4使用步骤① 安装vuex② 注册vuex③ 引用vuex④ 创建仓库Store五个模块介绍 5基本使用 二、Vue-router三、LocalStorage与SessionStorage、cookie的使用 一、Vuex
1理解vuex Vuex是一个专为Vue.js应用程序开发的状态管理系统库。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化 解读 在Vue中实现集中式状态数据管理的一个Vue插件对vue应用中多个组件的共享状态进行集中式的管理读/写也是一种组件间通信的方式且适用于任意组件间通信。 2优点 Vuex状态管理跟使用传统全局变量的不同之处 Vuex的状态存储是响应式的 就是当你的组件使用到了这个 Vuex 的状态一旦它改变了所有关联的组件都会自动更新相对应的数据这样开发者省事很多。 不能直接修改Vuex的状态 如果是个全局对象变量要修改很容易但是在 Vuex 中不能这样做想修改就得使用 Vuex。提供的唯一途径显示地提交commintmutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化在开发过程中调试的时候非常实用。
3何时使用 当你无法很好的进行数据管理的时候多个组件需要共享数据时你就需要用Vuex即 多个组件依赖于同一状态来自不同组件的行为需要变更为同一状态 Vuex 背后的基本思想. 进行注解 4使用步骤 因为我是通过命令创建vue项目的当时已经选配好了所以下面前四个步骤都不用自己配置 与router一样当我们在项目中使用vuex之后为了方便代码维护我们一般需要做特殊的目录调整约定的结构如下 根组件└── src├── main.js├── router│ └── index.js # 路由└── store└── index.js # vuex① 安装vuex npm install vuex --save② 注册vuex
在main.js中注册 import Vue from vueimport App from ./App.vueimport store from ./storeVue.config.productionTip falsenew Vue({store,render: h h(App)}).$mount(#app)③ 引用vuex
在store/index.js中引入 import Vue from vue //引入Vue核心库import Vuex from vuex //引入VuexVue.use(Vuex) //应用Vuex插件④ 创建仓库Store
要使用 Vuex我们要创建一个实例 store我们称之为仓库利用这个仓库 store 来对我们的状态进行管理。 //创建一个 storeexport default new Vuex.Store({state:{//存放状态},getters:{//state的计算属性},mutations: {//更改state中状态的逻辑同步操作},actions: {//提交mutation,异步操作},//如果将store分成一个个的模块的话则需要用到modules.//然后在每一个module中的state,gettersmutations,actions等modules: {a: moduleA,b: moduleB,//...}})五个模块介绍
State定义了应用状态的数据结构可以在这里设置默认的初始状态。Getter允许组件从 store 中获取数据mapGetters 辅助函数仅仅是将 store 中的 getter映射到局部计算属性state的计算属性。Mutation是唯一更改 store 中状态的方法且必须是同步函数。Action用于提交 mutation而不是直接变更状态可以包含任意异步操作。Module可以将 store 分割成模块module。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块(将store模块化 5基本使用
修改state中的年龄
store/index.js import Vue from vueimport Vuex from vuex //安装过直接导入Vue.use(Vuex) //使用vuex插件export default new Vuex.Store({state: {age:18,},mutations: {addAgeMutation(state){state.age}},actions: {addAgeAction(context){console.log(context) //第一个采纳数传入context内部有commit和dispatchcontext.commit(addAgeMutation) //调用commit会触发mutations中函数的执行} //封装性很强这里可以做出判断是否有权限改值如果有权限就通过},})组件中使用修改 scriptexport default {name: StatesView,created() {console.log(this.$store.state.age)},methods: {handleClick() {//this.$store.state.age 可以直接修改但是不建议这样使用this.$store.dispatch(addAgeAction) //按照流程 触发Vuex中的actions得函数执行 使用dispatch}},}/scripttemplatedivh1vuex的基本使用/h1hrh3vuex中的age---------》{{ $store.state.age }}/h3button clickhandleClick点击修改vuex中的age属性1/button/div/template二、Vue-router
三、LocalStorage与SessionStorage、cookie的使用 浏览器可以存数据1.cookie中有过期时间一旦过期就会清理掉2.localStorage中永久有效即便浏览器重启也有效只能手动或代码删除3.sessionStorage中当次有效关闭浏览器就清理掉了templatedivh1localStorage的使用/h1button clicksaveLocalStorage写入数据/buttonnbsp;nbsp;button clickgetLocalStorage获取数据/buttonnbsp;nbsp;button clickdelLocalStorage删除数据/buttonhrh1sessionStorage的使用/h1button clicksaveSessionStorage写入数据/buttonnbsp;nbsp;button clickgetSessionStorage获取数据/buttonnbsp;nbsp;button clickdelSessionStorage删除数据/buttonhrh1cookies的使用---使用第三方vue-cookies/h1需先安装cnpm install vue-cookies -Sbutton clicksaveCookie写入数据/buttonnbsp;nbsp;button clickgetCookie获取数据/buttonnbsp;nbsp;button clickdelCookie删除数据/buttonhr/div/templatescriptimport cookie from vue-cookies //cookies需要安装第三方导入后使用export default {name:IndexView,methods:{saveLocalStorage(){localStorage.setItem(name,xxx)},getLocalStorage(){console.log(localStorage.getItem(name))},delLocalStorage(){//localStorage.clear() //清空所有的localStorage数据localStorage.removeItem(name) //指定清除},saveSessionStorage(){sessionStorage.setItem(name,xxx)},getSessionStorage(){console.log(sessionStorage.getItem(name))},delSessionStorage(){sessionStorage.removeItem(name) //同localStorage一样指定清除},saveCookie(){cookie.set(name,xxx,7d) //按天算},getCookie(){console.log(cookie.get(name))},delCookie(){cookie.remove(name)},}}/script
