几分钟弄懂Vuex的五大属性和使用方式_vue.js_

npm install vuex

// 初始化一个vuex的实例（数据仓库） 导出即可 import Vuex from 'vuex' import Vue from 'vue' // 使用安装 Vue.use(Vuex) // 初始化 const store = new Vuex.Store({ // 配置（state|mutations|actions） }) export default store

import store from '@/store' new Vue({ // 把store对象挂载到vue实例对象中，这样就可以在所有的组件中获取store中的数据了 store, render: h => h(App), }).$mount('#app')

// 初始化vuex对象 const store = new vuex.Store({ state: { // 管理数据 count: 0 } })

A组件 state的数据：{{$store.state.count}}
A组件 state的数据：{{count}}

// 把state中数据，定义在组件内的计算属性中 computed: { // 1. 最完整的写法 // count: function () { // return this.$store.state.count // }, // 2. 缩写 count () { return this.$store.state.count } } // 不能使用剪头函数 this指向的不是vue实例

import { mapState } from 'vuex'

// 使用mapState来生成计算属性 mapState函数返回值是对象 // 使用mapState使用对象传参 // computed: mapState({ // // 1. 基础写法 (state) 代表就是vuex申明的state // // count: function(state) { // // return state.count // // } // // 2. 使用箭头函数 // // count: state => state.count // // 3. vuex提供写法 (count是state中的字段名称) // count: 'count', // // 4. 当你的计算属性 需要依赖vuex中的数据 同时 依赖组件中data的数据 // count (state) { // return state.count + this.num // } // })

// 2、mapState参数是一个数组 // computed: mapState(['count', 'total'])

// 3、即在内部保留原有的计算属性，又要把store中的数据映射为计算属性 computed: { // 组件自己的计算属性 calcNum () { return this.num + 1 }, // 把mapState返回值那个对象进行展开操作（把对象的属性添加到该位置） ...mapState(['count']) }

// mutations是固定的，用于定义修改数据的动作（函数） mutations: { // 定义一个mutation，用于累加count值 // increment这个名字是自定义的 increment (state, payload) { // state表示Store中所有数据 // payload表示组件中传递过来的数据 state.count = state.count + payload }, decrement (state, payload) { state.count = state.count - payload } }

 methods: { handleClick1 () { // 通过触发mutation修改state中的count的值 this.$store.commit('increment', 2) }, handleClick2 () { this.$store.commit('decrement', 1) } },

methods: { // 1、对象参数的写法 // ...mapMutations({ // // 冒号右侧的increment是mutation的名称 // // 冒号左侧的increment是事件函数的名称，可以自定义 // increment: 'increment' // }) // 2、数组参数的写法（事件函数名称和mutation名称一致） ...mapMutations(['increment']) // 3、这种写法和第2种等效 // increment (param) { // // 点击触发该函数后要再次触发mutation的 // this.$store.commit('increment', param) // } }

npm i axios //导入包 import axios from 'axios'

// actions是固定的，用于定义异步操作的动作（函数） actions: { // 定义了一个action，用于查询接口数据 async queryData (context, payload) { console.log(payload) // 调用接口获取数据 const ret = await axios.get('http://test.zjie.wang/tab') // 必须触发mutation修改list的值 // context类似于this.$store context.commit('updateList', ret.data.list) } }, mutations: { updateList (state, payload) { state.list = payload } }

methods: { handleQuery () { // 触发action(必须调用dispatch方法) this.$store.dispatch('queryData', 111) } }

// 相当于 methods申明了一个函数fn(num){ this.$store.dispatch('queryData', num)}  // ...mapActions({ //   fn: 'queryData' // }) // 相当于 methods申明了一个函数getData(num){ this.$store.dispatch('getData', num)}  ...mapActions(['queryData'])

// 相当于state的计算属性（基于State处理成另外一份数据） // getters的主要应用场景：模板中需要的数据和State中的数据不完全一样 // 需要基于state中的数据进行加工处理，形成一份新的的数据，给模板使用 getters: {     getPartList (state) {         return state.list.filter(item => {             return item.id > 1         })     } }

caleList () {   // 注意：获取getters的值，不需要加括号（当属性使用）   return this.$store.getters.getPartList },

import { mapGetters } from 'vuex' // mapGetters的作用：把getters映射为计算属性 computed: {     ...mapGetters(['getPartList']),     // ...mapGetters({     //   calcList: 'getPartList'     // }),     // calcList () {     //   // 注意：获取getters的值，不需要加括号（当属性使用）     //   return this.$store.getters.getPartList     // }, }

import vue from 'vue' import Vuex from 'vuex' Vue.use(vuex);   const state= ()=>{ token:''} const actions = {    set_token({commit},val){      commit("to_token",val)   } } const mutations = {    to_token(state,val){     state.token=val;   } } const getters = {}     //user模块 let user = {   namespaced: true, //一定要开始命名空间。   state: { userid: 1234 },   actions: {   },   mutations: {     SET_USERID(state, val) {       state.userid = val;     }   },   getters: {     } }   //购物车数据的模块 let cart = {   namespaced: true,   state: { userid: 567 },   actions: {     },   mutations: {   },   getters: {     } }     const store = new Vuex.Store({   state,   mutations,   actions,   getters,   modules: {     user,     cart   },   plugins: [createPersistedState({     storage: sessionStorage,     key: "token"   })]//会自动保存创建的状态。刷新还在 })   export 
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：关于delete和Vue.delete的区别及说明_vue.js_
                                                                
下一篇：Echarts图表位置调整的图文教程_javascript技巧_