vuex ｜ Youth training camp notes

---

theme: condensed-night-purple

highlight: a11y-dark

This is the 8th day of my participation in the "Fifth Youth Training Camp" Companion Notes Creation Activity

The concept and function of vuex

Official explanation: Vuex is a state management model specially developed for Vue.js applications

It uses a centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable manner. Vuex is also integrated into Vue's official debugging tool devtools extension, providing advanced debugging functions such as zero-configuration time-travel debugging, state snapshot import and export, etc.

What exactly is state management?

It can be simply regarded as storing all variables that need to be shared by multiple components in one object. Then, put this object in the top-level Vue instance, so that other components can use it. In this way, multiple components can share all the variable properties in this object. You can also encapsulate an object yourself, but it is more troublesome. You must ensure that all the properties in it are responsive.

State management: housekeepers generally use variables to save state vuex: state management tool responsive plug-in

单例模式，所有对象从单例模式中取出的对象都是同一对象
  单例模式的特点：第一次new创建对象，之后再new返回第一次创建的，所以只能创建一个，唯一

```js const shareObject = { name : 'yuli' } Vue.prototype.shareObject = shareObject // This is not responsive

Vue.component('cpn1', {
  // this.shareObject.name
})
Vue.component('cpn2', {

})
const app = new Vue({
  el : '#app'
})

```

what state to manage

Multiple states, shared between multiple interfaces

For example, the user's login status, user name, avatar, geographic location information, etc., and the collection of products, items in the shopping cart, etc.

# Single-interface to multi-interface state management switching

Vuex is a plug-in, which needs to be installed -> npm install [email protected] --save is also required at runtime, not only for development

If the vuex code is written in main.js, the main file will be very large, so it will be extracted and a new store warehouse file will be created.

The State is displayed on the View, and the Actions generated on the View will change the State

用户点击(行为)->保存在data中的message就是状态->再到视图(view)中展示 数据驱动视图改变，视图方法改变数据，一个循环

使用共享状态时,$store.state.counter 加$是为了避免与已被定义的数据、方法、计算属性等产生冲突

用const store变量接收 new vue.store 导出 然后导入 挂在 就定义了，不能 export default=new state getters actions plugins mutations modules plugins strict

需要按照规定的格式进行修改操作,否则后续调试时可能出现问题

简单案例

案例要求

在app里可以对counter进行加减操作 在hello里展示counter

案例实现

首先，我们需要在某个地方存放我们的Vuex代码：

我们先创建一个文件夹store，并且在其中创建一个index.js文件 在index.js文件中写入如下代码： ```js import Vue from 'vue' import Vuex from 'vuex'

// 1. 安装插件 Vue.use(Vuex) // 执行use,vue底层执行Vuex.install方法

// 2. 创建对象 // 使用Vuex的Store类 const store = new Vuex.Store({ state: { // 保存状态 }, mutations: { }, actions: { }, getters: { }, modules: { } })

// 3. 导出store对象 export default store ```

其次，挂载到vue实例上， 让所有的Vue组件都可以使用这个store对象

Come to the main.js file, import the store object, and put it in new Vue. In this way, in other Vue components, we can get the store object through this.$store ```js import store from ' ./store' Vue.config.productionTip = false

new Vue({ el: '#app', store, // Only after registering here will Vue.prototype.$store = store, all vue components will have a $store object render: h => h(App) }) ```

Use Vuex

in index.jsjs const store = new Vuex.Store({ state: { // 保存状态 counter : 100 }, mutations: { // 方法 默认参数state 自动传入state increment(state) { state.counter++ }, decrement(state) { state.counter-- } }, })

in the app when using

```js

{ {message}}

{ { $store.state.counter }}

// + // - + - //

export default { name: 'App', components : { HelloWorld }, methods: { addition() { this.$store.commit("increment") // use the commit method, pass in the method name // track every commit status}, subtraction(){ this.$store.commit("decrement") } } } ```

summary

Ok, that's the easiest way to use Vuex. Let's do a simple section on the usage steps:

1. Extract a common store object for saving state shared among multiple components
2. Place the store object in the new Vue object, so that it can be used in all components
3. 在其他组件中使用store对象中保存的状态即可 通过this.$store.state.属性的方式来访问状态 通过this.$store.commit('mutation中方法')来修改状态

注意事项：

我们通过提交mutation的方式，而非直接改变store.state.count。 这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值。