2. it
  3. vuex第一步挖坑

vuex第一步挖坑

mac2022-06-30  29

一、使用vuex

下载一下载二下载三CDN

https://unpkg.com/vuex

NPM

npm i vuex -S // 调用 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({})

Vuex依赖Promise。如果你支持的浏览器并没有实现Promise（比如IE），那么你可以使用一个polyfill的库，例如es6-promisePromise的CDN

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

NPM

npm install es6-promise --save

vuex里面有四个属性，state,getters,mutations,actions，实例化的store必须注入根实例中才能生效

二、state

state相当于一个数据存储结构，项目所有需要交互的数据都需要在state里面声明 state会暴露一个$store.state对象，然后可以通过$store.state对象调用state里面的属性，如果是子组件，则可以是this.$store.state

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="https://unpkg.com/vuex"></script> </head> <body lang="en"> <div id="app"> {{title}} <!-- 使用store里面的state值，在vuex实例页面，则store.state.pr即可，其余则需要this.$store --> <p>{{this.$store.state.num}}</p> // 1 <p>{{$store.state.str}}</p> // 测试vuex的state属性 <p>{{$store.state.test}}</p> // 为什么store.state...不行 </div> </body> </html> <script> // 声明vuex let store = new Vuex.Store({ state: { num: 1, str: '测试vuex的state属性', test: '为什么store.state...不行' } }) let app = new Vue({ el: '#app', store, // 要使用vuex,需要在vue实例里面注册一下 data: { title: 'vuex的初步使用' }, mounted () { console.log(this.$store.state.num) } }) </script>

三、getters

getters并没有什么实际上意义，就是一个存粹的函数，想当于vue里面的computed计算属性，可以重新计算定义state里面属性的值并返回 getters会暴露一个$store.getters对象，可以通过这个对象调用里面的函数属性

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="https://unpkg.com/vuex"></script> </head> <body lang="en"> <div id="app"> <h1>{{title}}</h1> <son></son> // true <p>{{$store.getters.newNum}}</p> // true <p>{{$store.getters.newStr}}</p> // 你好,我是不会前端 <p>{{$store.getters.newMessage}}</p> // message原内容为"你好吗?",现在改变为:我很好 </div> </body> </html> <script> let son = { template: `<div>{{$store.getters.newNum}}</div>`, } let store = new Vuex.Store({ state: { num: 1, str: '你好', message: '你好吗?' }, getters: { newNum: (state) => { if (state.num === 1) { return true } else if (state.num === 0) { return false } }, newStr: (state) => { if (state.str === '你好') { return state.str + ',我是不会前端' } }, newMessage: (state) => { if (state.message === '你好吗?') { state.message = '我很好' return 'message原内容为"你好吗?",现在改变为:' + state.message } } } }) let app = new Vue({ el: '#app', store, components: { son }, data: { title: '测试getters' } }) </script>

四、mutations

修改vuex中state的属性值的唯一方法就是通过commit提交mutations，getters只是个纯函数，只能返回一个新数据，而且调用的是$store.getters的方法，并没有改变state的值 mutations里面存放的就是回调函数，这些回调函数有参数，第一个就是我们要修改数据对象state，之后的参数就是我们自己自定义传的（官方称为：载荷(payload)），建议使用对象，如果是一个值，就直接传 mutations会暴露出一个$store.commit()方法，这个方法里面可以传入参数，第一个就是要执行的回调函数的名字，第二个就是我们要传入的参数，既然是方法，就需要绑定在事件上触发Tips 建议mutations的函数方法名全部大写链接

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex"></script> </head> <body> <div id="app"> <h1>{{title}}</h1> <p v-show="$store.state.show">是否显示隐藏</p> <!-- 通过点击事件提交mutations里面的方法，SET_SHOW就是方法名 --> <button @click="$store.commit('SET_SHOW')">点击控制</button> </div> </body> </html> <script> // 声明vuex组件 let store = new Vuex.Store({ state: { num: 1, show: '' }, getters: { newNum: function (state) { if (state.num === 1) { return true } else { return false } } }, mutations: { // 声明一个函数方法 SET_SHOW (state) { state.num = state.num ? 0 : 1 state.show = state.num ? false : true console.log(state.show) } } }) let app = new Vue({ el: '#app', store, data: { title: '测试mutations方法' } }) </script>

五、actions

mutations能够执行同步方法，但是不能执行异步，vuex建议所有异步操作都在actions里面执行，actions里面其实也可以调用执行mutations里面的函数方法 mutations是通过commit提交mutations，直接变更了state内容，而actions则是提交mutations actions里面的函数接受一个参数，这个参数类似于store实例，里面也有state，getters，mutations，actions等对象属性，也就意味着可以通过context.state、context.getters等方式来调用获取store实例里面的state,getters等 通过代码我们可以看出其实就相当于把mutations的commit方法放到了actions的context对象里面了，执行的还是一样的mutations操作，只不过actions能执行异步操作 actions会暴露出一个$store.dispatch()方法来触发actions里面的函数，这个方法可以接受参数，第一个参数就是需要调用执行的actions的函数名，第二个参数为自定义，建议为对象

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex"></script> </head> <body> <div id="app"> <h1>{{title}}</h1> <p v-show="$store.state.show">点击显示内容</p> <button @click="$store.dispatch('set_show')">点击控制</button> </div> </body> </html> <script> let store = new Vuex.Store({ state: { num: 1, show: '', test: '' }, getters: { newNum: state => { if (state.num === 1) { return state.show = true } else { return state.show = false } } }, mutations: { SET_SHOW (state) { if (state.num === 1) { state.num = 0 return state.show = true } else { state.num = 1 return state.show = false } } }, actions: { set_show (context) { // 一秒后显示 setTimeout(function () { context.commit('SET_SHOW') console.log(context.state.show) }, 1000) } } }) let app = new Vue({ el: '#app', store, data: { title: '测试actions方法' } }) </script>

转载于:https://www.cnblogs.com/zjh-study/p/10708300.html

相关资源：JAVA上百实例源码以及开源项目
最新回复(0)