vuex入门(一)

• 使用vue-cli构建1个vue项目

• 安装vuex

npm install vuex --save

• src目录下新建store文件夹，新建index.js

import { createStore } from 'vuex'
 
export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

• 配置mian.js，将store挂载到了vue实例，这样vue实例中的所有组件都能共享到store中的数据

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
 
createApp(App).use(store).mount('#app')

• 在项目根目录中新建一个.prettierrc文件，用于去除分号，使用单引号

{
    "semi": false,
    "singleQuote": true
}

• vuex数据共享方式1

# index.js中设置数据
import { createStore } from 'vuex'
export default createStore({
  state: {
    count: 0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
 
# 在Addition.vue组件中拿到数据
<template>
  <div>
    <h3>当前最新Count值为：{{ $store.state.count }}</h3>
  </div>
</template>

• 数据共享方式2

# 在Subtraction.vue组件中引入mapState函数，在计算属性中使用这个函数，传入数据共享的名称，三个点表示展开运算符，表示获取count参数列表
<script>
import { mapState } from "vuex";
// 暴露一个对象
export default {
  computed: {
    ...mapState(["count"])
  }
};
</script>
 
# 查看数据
<template>
  <div>
    <h3>当前最新Count值为：{{ count }}</h3>
    {{showNum}}
  </div>
</template>