vuex state及mapState的基础用法详解

2020-10-25 10:02:40 阅读：1070 来源： 互联网

标签：count vue js mapState state vuex store

store.js文件，这里的store就是我们的前端数据仓库,用vuex 进行状态管理，store 是vuex的核心。
可以看到使用vuex 之前，要告诉 vue 使用它，Vue.use(Vuex);

/*store.js*/
let store= new Vuex.Store({
  state: {
    token:'',
    //取出cartarry中的数据，或者为空
    cartarry:JSON.parse(localStorage.getItem('cartarry')) || [],//存储购物车商品的数组
  
  },

1， vue 提供了注入机制，就是把我们的store 对象注入到根实例中。vue的根实例就是 new Vue 构造函数，然后在所有的子组件中,this.$store 来指向store 对象。在store.js 中，我们let store, 把store已经暴露出去了，new Vue() 在main.js中，所以直接在main.js 中引入store 并注入即可。

/*main.js*/
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false

new Vue({
 router,
  store,
  render: h => h(App)
}).$mount('#app')

2，在子组件中,用computed 属性, computed 属性是根据它的依赖自动更新的。所以只要store中的state 发生变化，它就会自动变化。在Cart.vue 中作下面的更改，子组件中 this.$store 就是指向store 对象。我们把 store.js 里面的token 变为8, 页面中就变为了8。


 export default {
  computed: {
   count () {
    return this.$store.state.count 
   }
  }
 }

3，通过computed属性可以获取到状态值，但是组件中每一个属性（如：count）都是函数,如果有10个，那么就要写10个函数，且重复写10遍return this.$store.state，不是很方便。vue 提供了 mapState 函数，它把state 直接映射到我们的组件中。

当然使用mapState 之前要先引入它。它两种用法，或接受一个对象，或接受一个数组。还是在display.vue 组件下。

对象用法如下：

<script>
 import {mapState} from "vuex"; // 引入mapState 
 export default {
　　　　　　// 下面这两种写法都可以
  computed: mapState({
   count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁  
   count: 'count'　　　　　　　　　// 'count' 直接映射到state 对象中的count, 它相当于 this.$store.state.count,
  })
 }
</script>

数组的方法如下：

<script>
 import {mapState} from "vuex";

 export default {
  computed: mapState([ // 数组
   "count"
  ])
 }
</script>

参考链接https://www.jb51.net/article/138460.htm

标签：count,vue,js,mapState,state,vuex,store
来源： https://www.cnblogs.com/51net/p/13872341.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vuex state及mapState的基础用法详解