时间戳

首页 > 技术文章 > vuex的使用

vuex的使用

cowboybusy 原文

vuex的作用

vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，解决vue中各个组件之间传值和通信的问题

vuex的使用

  • 安装vuex：
    npm install vuex --save

  • 我们在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中再导出

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 1
    }
})

export default store

注意引入的vue和vuex字母的大小写，v都是小写，如果写成大写就无法引入

  • 我们在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    store,
    router,
    components: { App },
    template: '<App/>'
})

store跟router类似，如果import进来的模块名不叫store，应该这样写：

import Vue from 'vue'
import App from './App'
import router from './router'
import MyStore from './store'

Vue.config.productionTip = false
Vue.prototype.$appName = { name: 'main' }

/* eslint-disable no-new */
new Vue({
    el: '#app',
    store: MyStore,
    router,
    components: { App },
    template: '<App/>',


})

在任意模板中就可以使用store里面的变量了：

    <h1>{{ this.$store.state.count }}</h1>
  • Getters:
    Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果
    它的作用主要是用来派生出一些新的状态。比如我们要把state状态的数据进行一次映射或者筛选，再把这个结果重新计算并提供给组件使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 1
    },
    getters: {
        getCount: function(state) {
            return state.count + 1;
        }
    }
})

export default store

 <div>{{this.$store.getters.getCount}}</div>

注意getCount不要加括号

  • Mutations：
    如果需要修改store中的值唯一的方法就是提交mutation来修改
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 1
    },
    getters: {
        getCount: function(state) {
            return state.count + 1;
        }
    },
    mutations: {
        add(state) {
            state.count = state.count + 1;
        },
        reduce(state) {
            state.count = state.count - 1;
        }
    }

})

export default store

<template>
    <div>
         <div>{{this.$store.state.count}}</div>
         <div>{{this.$store.getters.getCount}}</div>
         <button @click="add">加</button> 
         <button  @click="reduce">减</button>
         <div @click="gotoTest2">goto test2</div>
    </div>
</template>
<script>
export default {
    methods:{
        changeName(){
            this.$appName.name = "test1"
        },
        gotoTest2(){
            this.$router.push({name:"Test2"})
        },
        add(){
            this.$store.commit("add")
        },

        reduce(){
            this.$store.commit("reduce")
        }
    },
}
</script>
  • 也可以使用actions来修改值
import Vue from 'vue'
import Vuex from 'vuex'
import { isContext } from 'vm';
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 1
    },
    getters: {
        getCount: function(state) {
            return state.count + 1;
        }
    },
    mutations: {
        add(state) {
            state.count = state.count + 1;
        },
        reduce(state) {
            state.count = state.count - 1;
        }
    },
    actions: {
        addFun(context) {
            context.commit("add")
        },
        reduceFun(context) {
            context.commit("reduce")
        }
    }

})

export default store

这里的context相当于上面的this.$store

<template>
    <div>
         <div>{{this.$store.state.count}}</div>
         <div>{{this.$store.getters.getCount}}</div>
         <button @click="add">加</button> 
         <button  @click="reduce">减</button>
         <div @click="gotoTest2">goto test2</div>
    </div>
</template>
<script>
export default {
    methods:{
        changeName(){
            this.$appName.name = "test1"
        },
        gotoTest2(){
            this.$router.push({name:"Test2"})
        },
        add(){
            this.$store.dispatch("addFun")
        },

        reduce(){
            this.$store.dispatch("reduceFun")
        }
    },
}
</script>

组件中使用dispatch替代commit

  • 使用参数：
<template>
    <div>
         <div>{{this.$store.state.count}}</div>
         <div>{{this.$store.getters.getCount}}</div>
         <button @click="add">加</button> 
         <button  @click="reduce">减</button>
         <div @click="gotoTest2">goto test2</div>
    </div>
</template>
<script>
export default {
    methods:{
        changeName(){
            this.$appName.name = "test1"
        },
        gotoTest2(){
            this.$router.push({name:"Test2"})
        },
        add(){
            this.$store.dispatch("addFun",2)
        },

        reduce(){
            this.$store.dispatch("reduceFun",2)
        }
    },
}
</script>


import Vue from 'vue'
import Vuex from 'vuex'
import { isContext } from 'vm';
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 1
    },
    getters: {
        getCount: function(state) {
            return state.count + 1;
        }
    },
    mutations: {
        add(state, n) {
            state.count = state.count + n;
        },
        reduce(state, n) {
            state.count = state.count - n;
        }
    },
    actions: {
        addFun(context, n) {
            context.commit("add", n)
        },
        reduceFun(context, n) {
            context.commit("reduce", n)
        }
    }

})

export default store

  • 在组件1里改变的值，通过路由跳转到组件2时，会同步更新，取改变后的值

  • store的在vue中的初始化过程
    Vue.use(Vuex)时，跟所有插件一样，会调用Vuex的的install方法，注册一个$store属性
    Vue.prototype.$store
    在main.js里面，我们在根组件里传入了一个store对象，Vue会通过调用Vuex以下方法把这个对象赋值给$store：

function vuexInit () {
  const options = this.$options
  // store injection
  if (options.store) {
    this.$store = options.store
  } else if (options.parent && options.parent.$store) {
    this.$store = options.parent.$store
  }
}

这样，我们后面使用this.$store实际操作的是store对象，因为Vue回调Vuex的vuexInit时，store这个变量名是写死的，所以根组件中传入的变量名必须是store，当然也可以用它指向其他变量，比如：
store: MyStore
router也是类似的道理

  • vuex用于同一个页面各个组件之间传递数据，它使用内存保存变量，浏览器刷新后，保存的数据也将失效，本身并不适合做全局数据保存，所以如果需要刷新时还能使用保存的数据，需要结合sessionstorage或localstorage
getters:{
    userInfo(state){
        if(!state.userInfo){
            state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        }
        return state.userInfo
    }
},
mutations:{
    LOGIN:(state,data) => {
        state.userInfo = data;
        sessionStorage.setItem('userInfo',JSON.stringify(data));
    },
    LOGOUT:(state) => {
        state.userInfo = null;
        sessionStorage.removeItem('userInfo');
    }
},

推荐阅读