美文网首页
vuex--基本使用

vuex--基本使用

作者: 手指乐 | 来源:发表于2019-10-12 15:53 被阅读0次

    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

    <font color=red>注意引入的vue和vuex字母的大小写，v都是小写，如果写成大写就无法引入</font>

    • 我们在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

     addFun(context) {
            context.commit("add")
        },

    可以等效写成这样：

     addFun({ commit }) {
           commit("add")
        },

    组件中使用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")
        },

        reduce(){
            this.$store.dispatch("reduceFun")
        }
    },
}
</script>
    • 使用参数：
    <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

    • 在action中，可以这样访问：context.state.count context.getters.getCount

    • 在组件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');
    }
},

    下面这个github上的小游戏：
    https://github.com/leftstick/vue-memory-game
    就是用vuex实现同一个页面多个组件之间的通信：

    相关文章

      网友评论

          本文标题：vuex--基本使用

          本文链接：https://www.haomeiwen.com/subject/magqmctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|vuex--基本使用|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！