vuex-流程配置

定义：
集中管理组件数据状态的组件，组件对这些数据进行读写操作
<select v-model.number="n">
强制对v-model类型转换为数字类型

• 安装

npm i vuex@3
//因为是使用vue2所以匹配的版本是vuex3

vuex的流程图

vuex.png

VueComponents(也就是组件)，要使用vuex，涉及到3个对象，actions，mutations，state
组件调用dispatch这个方法，actions这个对象接收组件提交的结果
actions这个对象调用的是Commit这个方法向mutations提交结果
mutations在对state操作

新建一个store文件，然后把这些对象部署在这个文件的index.js这个文件中

store-index.PNG

store>index.js

import App from './app.vue'
import Vue from 'vue'
//导入store
import store from './store/index'
//导入vuex
import Vuex from 'vuex'
// 使用Vuex
Vue.use(Vuex)

new Vue({
 el:'#app',
 store,
 render:h => h(App)
})

总的来说：组件提交行为给actions，actions提交行为给mutations，mutations提交行为给state
因为是插件，所以main.js要导入这个插件并使用，如下：

import App from './app.vue'
import Vue from 'vue'
//导入store
import store from './store/index'
//导入vuex
import Vuex from 'vuex'
// 使用Vuex
Vue.use(Vuex)

new Vue({
 el:'#app',
 store,
 render:h => h(App)
})

报了个出错：
vuex.esm.js?2f62:135 Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
意思调用Vue.use(Vuex)之前，必须先创建store实例
但是
Vue.use(Vuex)
import Vuex from 'vuex'
这两行命令不管谁在前，谁在后，脚手架都会先执行import 这行代码

main.js

import App from './app.vue'
import Vue from 'vue'
//导入store
import store from './store/index'

new Vue({
 el:'#app',
 store,
 render:h => h(App)
})

index.js

import Vuex from 'vuex'
//导入vuex
import Vue from 'vue'
// 使用Vuex
Vue.use(Vuex)

//响应组件请求，存储请求动作
const actions={}
//操作state数据
const mutations={}
// 存储结果
const state={}
export default new Vuex.Store({
 actions,
 mutations,
 state
})

原本在main.js的两行代码
//导入vuex
import Vue from 'vue'
// 使用Vuex
Vue.use(Vuex)
放到index.js文件里面