vuex之state

Posted hj412

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex之state相关的知识,希望对你有一定的参考价值。

我的理解

  • 个人认为,不用说得太过深奥,vuex其实就是把一个应用的某些数据统一管理起来,以便其他的组件更方便的操作该数据。

    为什么使用vuex

  • 当项目结构越来越复杂,组件的多层嵌套使得数据传递非常繁琐,并且难以维护,有了vuex,我们可以把一些数据的状态统一管理起来,通过调用vuex暴漏出来的API,就可以简单方便操作数据。非常方便。

    基本使用

  • 安装
    npm install vuex --save
  • 创建store实例
    • 我们在我们的项目 创建 一个 store.js 文件,注意在模块化构建系统中,需要调用 Vue.use(Vuex),通过在根实例 vm(new Vue({ store })注册 store,这样根组件的所有子组件都可以$store.state.xxx访问state的数据了。
    //这里我引入vue 直接指定了路径  方法不唯一,只要能引入vue即可
    import Vue from '../../node_modules/vue/dist/vue.js'
    //引入vuex
    import Vuex from 'vuex'
    //调用 Vue.use()
    Vue.use(Vuex)
    //创建store实例
    const store = new Vuex.Store({
        name: "车神-黄杰"
    })
    //导出 store对象
    export default store
  • main.js文件
   import Vue from '../..//node_modules/vue/dist/vue.js'
   import App from './App.vue'
   import store from './store.js'

   //创建vm实例
   const vm = new Vue({
       el: '#app',
        render(c){
            return c(App)
        },
        //在 vm注册store
        store
    })
  • state
    • state就相当于 vue的data,就是定义一些公共的数据,这里的数据每一个组件都可以访问,此时在组件中 可以通过 $store.state.xxxx得到该数据。
    //App组件
    <template>
        <h2>{{name}}</h2>
    </template>
    <script>
    export default {
        data(){
            return {}
        },
        computed(){
            name(){
                return this.$store.state.name
            }
        }
    }
    </script>
    <style lang="less" scoped></style>

mapState

  • 不通过计算属性返回状态得到数据的方式,直接通过 $store.state.xxx也可以获得数据,只不过当一个组件多处都用到该数据,这样代码就会显得很臃肿,而通过计算属性定义每一个数据也很不方便,因此官方提供 mapState函数来帮助我们更方便的把状态映射成为组件的计算属性。没啥好测试的,直接用官网的例子,有以下几种方式:

  • 传入对象
    // 在单独构建的版本中辅助函数为 Vuex.mapState
    import { mapState } from 'vuex'

    export default {
      computed: mapState({
        // 箭头函数可使代码更简练
        count: state => state.count,

        // 传字符串参数 'count' 等同于 `state => state.count`
        countAlias: 'count',

        // 为了能够使用 `this` 获取局部状态,必须使用常规函数
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      })
    }
  • 此时计算属性和state的节点名称相同 此时传入一个数组,里面即为state数据名称字符串
    computed: mapState([
      // 映射 this.count 为 store.state.count
      'count'
    ])
  • 当我们想要和局部的计算属性一起使用,使用对象展开运算符...
    computed: {
      localComputed () { /* ... */ },
      // 使用对象展开运算符将此对象混入到外部对象中
      ...mapState({
            //这里的写法与传入对象的写法一致
      }),
     ...mapState([
            //这里的写法与传入数组的写法一致
          ])
       }

注意

  • 要想 通过this获取局部状态,只能使用常规函数,不能使用箭头函数,我测试了一下,箭头函数中的this为undefined。具体原因是箭头函数this指向问题。有兴趣可以去了解一下。

以上是关于vuex之state的主要内容,如果未能解决你的问题,请参考以下文章

13vuex2.0 之 state

vuex之state

Vue 之 vuex 解决刷新页面 state 数据丢失的问题,使用vuex-persistedstate进行state持久化

vuex使用之state访问状态对象

Vuex状态数据源state

09-vuex基本应用之计数demo