vuex

Posted 2020-10-29 赵理通

main.js

npm i vuex --save

import Vuex from ‘vuex‘

import store from ‘./store‘

Vue.use(Vuex)

new Vue({
    el: ‘#app‘,
    router,
    store,
    components: {
        App
    },
    template: ‘<App/>‘
})

 

 

 

 然后  建一个store.js   为了保存 你的状态呀

 

store.js 

import Vue from ‘vue‘
import Vuex from ‘vuex‘

// 告诉 vue “使用” vuex
Vue.use(Vuex)

// 创建一个对象来保存应用启动时的初始状态
// 需要维护的状态
const store = new Vuex.Store({
    state: {
        
    },
    mutations: {
        
    },
    getters: {
        
    },
    actions: {
    
    }
})
// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以连接到我们的应用中
export default store

 

status  获取状态

this.$store.state   就是 你的 state   获取值

 

getters 获取

store.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘

// 告诉 vue “使用” vuex
Vue.use(Vuex)

// 创建一个对象来保存应用启动时的初始状态
// 需要维护的状态
const store = new Vuex.Store({
    state: {
        
        age: 55
    },
    
    getters: {
        getAge: function(state) {
            return state.age;
        }
    },

})
// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以连接到我们的应用中
export default store

store.vue

computed:{
         name:function(){

           return this.$store.getters.getAge

         }

 

 

Mutation  改变state 中的值   同步

store.js

mutations: {
        change: function(s, c) {
            s.age = c
        }
    }

store.vue

    methods:{
         jia:function(){
             var data=this.$store.state.age+1

              this.$store.commit(‘change‘,data)

              console.log(this.$store.state.age)
         }
     }

 

actions 异步改变值

 

store.js

const store = new Vuex.Store({
    state: {        
        age: 55
    },
    mutations: {    
        yibu: function(s, c) {
            s.age = c
        }
    },    
    actions: {
        jian: function(context, value) {
            console.log(context)
            console.log(value)

            setTimeout(function() {　　　　　　　　　　
                context.commit(‘yibu‘, value);
            }, 1000)

        }
    }
})

store.vue

   methods:{
         jian:function(){
             var data=this.$store.state.age-1

              this.$store.dispatch(‘jian‘, 5);

              console.log(this.$store.state.age)
         }
     }