vuex创建store并用computed获取数据

Posted luguankun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex创建store并用computed获取数据相关的知识,希望对你有一定的参考价值。

vuex中的store是一个状态管理器,用于分发数据。相当于父组件数据传递给子组件。

1.安装vuex

npm i vuex --save

2.在src目录中创建store文件夹,里面创建store.js

(1)store.js里引入vue和Vuex,

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

(2)创建并导出store对象

export const store = new Vuex.Store({  })

(3)在store对象中创建数据

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
export const store = new Vuex.Store({
    state:{
        product:[
            {name:"自行车",price:120},
            {name:"电动车",price:200},
            {name:"出租车",price:300},
            {name:"大货车",price:444},
        ]
    }
})

3.在main.js中引入store

import Vue from ‘vue‘
import App from ‘./App‘
import {store} from ‘../src/store/store‘    // 引入store
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  store,    // 这里写这里
  components: { App },
  template: ‘<App/>‘
})

4.在子组件中使用computed获得store里的数据

<template>
<div>
    <p>one</p>
    <table border="1">
        <tr>
            <th>产品名称</th>
            <th>产品价格</th>
        </tr>
        <tr v-for="(item,i) in getProduct">
            <td>{{item.name}}</td>
            <td>${{item.price}}</td>
        </tr>
    </table>
</div>
</template>
<script>
export default {
  name: "One",
  data () {
    return {
    };
  },
  computed:{
      getProduct(){
          // this.$tore.state.xxx
          return this.$store.state.product;
      }
  }
}
</script>
<style lang="css" scoped>
table{
    width: 200px;
    height: 100px;
    border-collapse: collapse;
}
</style>

 

以上是关于vuex创建store并用computed获取数据的主要内容,如果未能解决你的问题,请参考以下文章

watch实现监听Vuex状态监听(利用computed)

Vuex

为什么Vuex内数据改变了而组件没有进行更新?

vuex使用getters篇

vuex状态管理

Vuex 文档解读