山西专业网站建设大全,高校网站群建设研究,win7 建设网站服务器,企业网页开发vuex是什么
Vuex是实现组件全局状态#xff08;数据#xff09;管理的一种机制#xff0c;方便的实现组件之间的数据的共享
使用vuex统一管理状态的好处
能够在vuex中集中管理共享的数据#xff0c;易于开发和后期维护能够高效地实现组件之间的数据共享#xff0c;提高…vuex是什么
Vuex是实现组件全局状态数据管理的一种机制方便的实现组件之间的数据的共享
使用vuex统一管理状态的好处
能够在vuex中集中管理共享的数据易于开发和后期维护能够高效地实现组件之间的数据共享提高开发效率存储在vuex中的数据都是响应式的能够实时保持数据与页面的同步
使用vuex
npm install vuex –save创建store.js文件在src项目中项目中的代码为代码1在main.js中引入storeimport store from ‘./store’在main.js的new Vue({})中添加代码2
// 代码1
export default Vuex.Store new Vuex.Store({//state中存放的就是全局共享数据state:{ },mutation:{ },action:{ }getters: { }
})new Vue({el: #app,router,components: { App },template: App/,store,render:hh(App)
}).$mount(#app)访问state中数据方式
// 以count数据为例: this.$store.state.count
import { mapState } from vuex // 从vuex中按需导入mapState函数
// 通过刚才导入的mapSate函数将当前组件需要的全局数据映射为当前组件的computed计算属性
computed: { ...mapState( [ count ])Mutation
Mutation用于变更store中的数据
只能通过mutation变更store数据不可以直接操作Store中的数据通过mutation方式虽然操作稍微繁琐但是可以集中监控所有数据的变化Mutation中定义对应的数据处理函数Mutation中的事件处理函数的传值一个是本身的传值一个为接收的值在mutation中不能写异步代码如计时器setTimeout等异步操作写在action中
//传递的参数接收的参数
add(state,step){state.count step
}触发mutaion
在methods中触发
//在使用数据的页面中处理该情况为调用stare.js中mutation中的add方法
handle(){//在接收的方法传递的参数this.store.commit(add, 3) //commit的作用就是调用某个mutation函数
}从vuex中按需导入mapMutation函数
import { mapMutations } from vuex
// 通过刚才导入的mapMutation函数将需要的mutation函数映射为当前组件的methods方法(例如调用store.js中的add和del方法)
methods{ ...mapMutations( [add, del] ) } actions
Actions用于异步操作但是在Actions中还是要通过触发Mutation的方式间接变更数据
const store new Vuex.store({// ...省略其他代码mutations: {add(state) {state.count}},actions: {addAsync(context) {setTimeout(() {context.commit(add)}, 1000)}}})Commit只能触发mutation中的某个函数通过接收形参context来点出commit 在Actions中不能直接修改state中的数据必须通过context.commit触发某个motation才行 下图中的dispath函数是专门用来触发actions的 若带有参数则将参数接在后面
// 从vuex中按需导入mapActions函数
import { mapActions } from vuexmethods: { // 将所需的函数映射到当前组件的methods中...mapAction( [addAsync, delAsync] ),...mapMutation([add,del])
} //在mapMutations或mapActions中映射方法后可以直接click调用方法
el-button clickadd/el-buttonGetter
Getter用于对Store中的数据进行加工处理,并不修改store中的数据
getters:{showNum(state){return 当前的数量是state.count.}}使用getter的方式
// This.$store.getter.名称: {{ $store.getters.showNum }}import { mapGetters } from vuex
conputed:{ ...mapGetters( [showNum] )
