526互联

Vue-Vuex 状态管理

发布时间 2023-11-17 16:46:38作者: 忙着可爱呀~

简介：

   vuex：多个文件公共状态管理

    vuex五个属性：

      state：数据存储

      getters：数据提取，对数据进行提取，不更改原数据，和vue计算属性computed一样，实时监听state值的变化（最新状态），并把最新数据扔进vue.store里；如提取对象数组中id不为0的数据

      mutations：数据更改（同步），通过方法直接更改数据

      actions：数据更改（异步），通过提交mutations更改数据

      module：vuex模块化，将各个公共状态独立；如：将 登录、购物车、计算价格模块等独立，避免所有公共状态在一个文件中造成混乱

 

   vuex四个辅助函数：简化前四个属性的获取

      mapState：数据拓展函数

      mapGetters：数据提取拓展函数

      mapMutations：数据更改拓展（同步）函数

      mapActions：数据更改拓展（异步）函数

基本操作：

v-cli下：

   1、安装

npm install vuex --save

   2、注册实例化

store.js  >>> 
 
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state={   // 数据存储
     
};

const getters = {   //数据提取
   
};

const mutations = { // 数据更改（同步）
    
};

 const actions = { // 数据更改（异步）
    
};

 const store = new Vuex.Store({
       state,
       getters,
       mutations,
       actions
});

export default store;

index.js >>>


import store from 'store.js' //引入store
 
new Vue({
  el: '#app',
  store, // 使用store
  template: '<App/>',
  components: { App }
})


 

CDN下：

   1、安装

<script src="vuex.js" />

  2、注册实例化

store.js >>>

function getStoreFun () {

    var state = { // 数据存储
        
    }

    var getters = { // 数据提取
        
    }

    var mutations = { // 数据更改（同步）
        
    }

    var actions = { // 数据更改（异步）
        
    }

    var store = new Vuex.Store({
        state,
        getters,
        mutations,
        actions
    })

    

    return store
}



index.js >>>


  var store = getStoreFun() // vuex引入


new Vue({
                store, // 使用store
                el: "#app"
}）

 

示例：

 

（注：...Vuex.辅助函数 独立文件使用方式）

 

   1、state、mapState:

    

store.js  >>>

var state = {
        count: 0
    }


test.js >>>

第一种使用方式：

<span>{{this.$store.state.count}}</span>

created() {
    console.log(this.$store.state.count)
},
  

第二种使用方式：

computed: {
        ...mapState([
            'count'
        ])
    },

<span class="common__btn__sure">{{count}}</span>

created() {
       console.log(this.count)
    },

第三种使用方式：
（注：...Vuex.mapState 独立文件使用方式
computed: {
        ...mapState({
            num: 'count'
        })
    },

<span class="common__btn__sure">{{num}}</span>

created() {
       console.log(this.num)
    },

 

 

   2、getters、mapGetters：

   

store.js  >>>

var state = { // 数据存储
        test: [
            {
                id: 0,
                done: false,
            },{
                id: 1,
                done: true,
            },{
                id: 3,
                done: false,
            },{
                id: 4,
                done: true,
            },
        ]
    }

var getters = {
        getTest (state) {
            return state.test.filter(item => item.done == true) // 提取test对象数组中done为true的数据
        }
    }

test.js >>>

第一种使用方式：

<span v-for="(item, index) in this.$store.getters.getTest">{{item.id}}</span>

created() {
       console.log(this.$store.getters.getTest)
    },

第二种使用方式：

computed: {
        ...mapGetters([
            'getTest'
        ])
    },

<span v-for="(item, index) in getTest">{{item.id}}</span>

created() {
       console.log(this.getTest)
    },

第三种使用方式：
computed: {
        ...Vuex.mapGetters({
            arr: 'getTest'
        })
    },

<span v-for="(item, index) in arr">{{item.id}}</span>

created() {
       console.log(this.arr)
    },

 

 

  3、mutations、mapMutations

    

store.js >>>

var state = { 
        count: 0,
    }

var mutations = { 
        addCount (state) {
            ++ state.count
        }
    }


test.js  >>>

第一种方法：

methods: {
        addCountFun: function () {
            this.$store.commit('addCount')
        }
    },

<span @click="addCountFun">增加</span>

第二种方法：

methods: {
        ...mapMutations([
            'addCount'
        ])
    },
<span @click="addCount">增加</span>

第三种方法：

methods: {
        ...Vuex.mapMutations({
            addCountFun: 'addCount'
        })
    },

<span @click="addCountFun">增加</span>
mutations 基本使用

 

 

store.js >>>

var state = { 
        count: 0,
    }

var mutations = { 
        addCount (state, payload) {
            state.count += payload
        },
    }


test.js  >>>

提交载荷（传参）：

第一种方式：

methods: {
        addCountFun: function () {
            this.$store.commit('addCount', 2)
        },
    },


<span @click="addCountFun">增加</span>

第二种方式：

var mutations = { （store.js）
        addCount (state, payload) {
            state.count += payload.amount
        },
    }

methods: {
        addCountFun: function () {
            this.$store.commit('addCount', {
                amount: 10
            })
        },
    },

<span @click="addCountFun">增加</span>

第三种方式：

var mutations = {（store.js）
        addCount (state, payload) {
            state.count += payload.amount
        },
    }


methods: {
       addCountFun: function () {
            this.$store.commit({
                type: 'addCount',
                amount: 20
            })
        },
    },

<span @click="addCountFun">增加</span>

第四种方式：

var mutations = {（store.js）
        addCount (state, payload) {
            state.count += payload.amount
        },
    }


methods: {
       ...Vuex.mapMutations({
            addCountFun: 'addCount'
        }),
    },

<span @click="addCountFun({amount: 11})">增加</span>
mutations 传参

 

 4、actions、mapActions

 

store.js  >>>

var state = {
        count: 0
    }

var mutations = { 
        
        reduceCount (state) {
            -- state.count
        }
    }

var actions = { 
        reduceCount (context) {
            context.commit('reduceCount') // 提交mutations 改变数据
        }
    }

或

var actions = { // 数据更改（异步）
        reduceCount ({commit}) { // 参数解构
            commit('reduceCount')
        }
    }

test.js  >>>  使用方法与 mutations 同样，区别在于获取的方式不同 
 this.$store.dispatch('方法名')

基础方式：

methods: {
        reduceCountFun: function () {
            this.$store.dispatch('reduceCount')
        }
    },

<span @click="reduceCountFun">减少</span>

其它方式与 mutations 类似

 

 5、modules

（注：index.js内的state、getters....使用方式和以上一样；独立文件中用 return ，v-cli 中 export default）

文件结构（文件自行设置，此处为示例）：

store文件夹
   index.js   // 引入模块文件
   modules   // 放置模块文件夹
      add.js
      reduce.js

 

store => index.js

// 此处引入文件

import add from ./modules/add
import reduce from ./modules/reduce

var state = { // 数据存储
        parent: 10
    }

    var getters = { // 数据提取；根据需要，处理并提取数据,不更改原数据
        
    }

    var mutations = { // 数据更改（同步）
        
    }

    var actions = { // 数据更改（异步）
        
    }

    var store = new Vuex.Store({
        state,
        getters,
        mutations,
        actions,
        modules: {
            add,
            reduce
        }
    })

    return store
store => index.js
store/modules/add.js

var state = { // 数据存储
        count: 100
    }

    var getters = { // 数据提取；根据需要，处理并提取数据,不更改原数据
        
    }

    var mutations = { // 数据更改（同步）
        // 同步操作
        addCount (state) {
            state.count += 2
        }
    }

    var actions = { // 数据更改（异步）
        
    }

    return {
        namespaced: true,
        state,
        getters,
        mutations,
        actions
    }
store/modules/add.js
store/modules/reduce.js

var state = { // 数据存储
        count: 0
    }

    var getters = { // 数据提取；根据需要，处理并提取数据,不更改原数据
        
    }

    var mutations = { // 数据更改（同步）
        
        reduceCount (state) {
            state.count -= 30
        }
    }

    var actions = { // 数据更改（异步）
        reduceCount ({commit}) {
            commit('reduceCount')
        }
    }

    return {
        namespaced: true,
        state,
        getters,
        mutations,
        actions
    }
store/modules/reduce.js

 

使用示例：

test.js >>>

computed: {
        ...mapState({ // 辅助函数获取state内的值需要通过方法获取
            addCount: state => state.add.count
        })
    },

created() {
       console.log(this.addCount)
    },

<span>{{addCount}}</span>