vuex之state

Posted 2021-02-16 hj412

我的理解

• 个人认为，不用说得太过深奥，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指向问题。有兴趣可以去了解一下。