PHP Linter 与规则定义小探

最新推荐文章于 2024-10-10 09:38:48 发布

姑老爷呀

最新推荐文章于 2024-10-10 09:38:48 发布

阅读量169

点赞数

文章标签： php javascript vue.js

本文链接：https://blog.csdn.net/pfourfire/article/details/127088066

版权

前言：

初次尝试使用vuex,记录在vue2项目中如何使用vuex进行数据管理，以便日后温习。 vue2项目中，要使用vuex的3版本；vue3项目中，要使用vuex的4版本。该文没有记录安装vuex的步骤，是因为在创建项目的时候选择了vuex选择项。

使用步骤：

1.在根目录下创建store文件夹，并创建index.js文件（基本结构如下）

// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 应用Vux插件
Vue.use(Vuex)

//1. state用于存放数据
const state = {}
// 2.getter用于state中数据加工
const getters = {}
// 3.mutations用于操作数据
const mutations = {}
// 4.actions用于响应组件中的动作
const actions = {}
// 创建并暴露store
export default new Vuex.Store({state,getter,mutations,actions
})

2.在main.js文件中引入store对象并进行挂载

3.在组件中进行使用。

Demo演示：

1.创建index.js文件

// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 应用Vux插件
Vue.use(Vuex)

//1. state用于存放数据
const state = {name: 'LeeYUFan',sex: '男',age: 20 //周岁
}
// 2.getter用于state中数据加工
const getters = {nominalAge(state) {return state.age + 1}
}
// 3.mutations用于操作数据
const mutations = {// 修改姓名updateName(state, val) {console.log(state, val)state.name = val},// 修改性别updateSex(state, val) {state.sex = val},updateAge(state,val){state.age = val}
}
// 4.actions用于响应组件中的动作
const actions = {// 两秒之后进行性别的修改delayUpdateSex(content, val) {// 直接通过改变state中的数据// content.state.sex = val// 通过调用mutations对象中的函数对state中的数据进行操作setTimeout(() => {content.commit('updateSex', val)console.log('我是3秒后才执行的函数')}, 3000)}
}
// 创建并暴露store
export default new Vuex.Store({state,getters,mutations,actions
})

2.在main.js文件中引入store对象

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入store
import store from './store'

Vue.config.productionTip = false

new Vue({router,store,render: h => h(App)
}).$mount('#app')

3.在组件中进行使用。

测试：在main.js文件中进行引入并挂载后，在组件中输出this,结果如下：(每个组件实例上都包含着Store对象)

在组件中使用：

<template><div id="app"><HelloWorld></HelloWorld><!-- 读取store中数据 --><h4>姓名：{{this.$store.state.name}}</h4><h5>性别：{{this.$store.state.sex}}</h5><h5>周岁：{{this.$store.state.age}}</h5><h5>虚岁：{{nominalAge}}</h5><button @click="updateName">修改姓名</button><button @click="updateSex">修改性别</button><button @click="updateAge">修改年龄</button><button @click="delayUpdateSex">异步修改呢性别</button></div>
</template>
<script> import HelloWorld from './components/HelloWorld.vue'export default{components:{HelloWorld},mounted(){console.log(this,'App中输出this>>>>>>>>>>>>>>>')},computed:{// 虚岁nominalAge(){this.$store.getters.nominalAge}},methods:{// 修改store中数据updateName(){this.$store.commit('updateName','李玉帆')},// 修改性别updateSex(){this.$store.commit('updateSex','女')},// 修改年龄updateAge(){this.$store.commit('updateAge',21)},// 异步进行性别修改delayUpdateSex(){this.$store.dispatch('delayUpdateSex','Female')}}} </script>

借助辅助函数在组件中使用：

<template><div id="app"><HelloWorld></HelloWorld><!-- 读取store中数据 --><h4>姓名：{{name}}</h4><h5>性别：{{sex}}</h5><h5>周岁：{{age}}</h5><h5>虚岁：{{age1}}</h5><button @click="updateName('李玉帆')">修改姓名</button><button @click="updateSex('女')">修改性别</button><button @click="updateAge(21)">修改年龄</button><button @click="delayUpdateSex('Female')">异步修改呢性别</button></div>
</template>
<script> import HelloWorld from './components/HelloWorld.vue'import { mapGetters, mapState ,mapMutations,mapActions} from 'vuex'export default{components:{HelloWorld},mounted(){console.log(this,'App中输出this>>>>>>>>>>>>>>>')},computed:{// 借助mapState生成计算属性 ---- 对象的写法...mapState({name:'name',sex:'sex',age:'age'}),// 借助mapGetters生成计算属性---- 对象的写法...mapGetters({age1:'nominalAge'}),// 数组的写法 (键名和值相同时支持数组的写法)// ...mapState(['name','sex','age'])},methods:{...mapMutations(['updateName','updateSex','updateAge']), ...mapActions(['delayUpdateSex'])}} </script>

注意：

1.借助辅助函数时，如要写成数组的形式，需要保证组件中方法名字和index.js文件中方法的名字是一致的。